PDF de programación - Introducción al diseño de páginas web con estándares y programas open source: Tutorial de XHTML, CSS y NVU

Introducción al diseño de páginas web con

estándares y programas open source:

Tutorial de XHTML, CSS y NVU



Por Lluís Codina y Cristòfol Rovira

UPF, Marzo 2007



Primera Parte: El código fuente de una página web



1. Creación de documentos Web

1.1. Páginas Web y código fuente

El contenido de una página web se puede ver de dos formas diferentes:

- Como código fuente. Para verlo así, podemos usar un simple editor de
textos, como el Bloc de Notas, o un editor de páginas Web como NVU
(volveremos sobre este programa más adelante).

- Como el resultado de interpretar el código fuente. Es lo que hcaemos de
forma natural cada vez que accedemos a una página web con un navegador
estándar de Internet como Internet Explorer, Mozilla, Opera, etc.

Las siguientes capturas de pantalla muestran las dos formas distintas de ver
una página web:





Figura 1: Una página web de la televisión pública de Estados Unidos (PBS) dedicada a
documentales científicos



Figura 2: La misma página, pero vista ahora como código fuente (haciendo clic en Ver >
Código fuente, en este caso con Firefox).


El código fuente de una página Web es un documento de texto que
combina:


i), contenido de la página web;
ii), instrucciones sobre cómo debe tratar (o mostrar) ese contenido
el navegador;
iii), opcionalmente, enlaces para acceder a otros documentos o para
incorporar elementos gráficos (p.e. una imagen) a la misma página
web.


Con el navegador vemos les tres cosas como si fueran una unidad. Para
hacer un símil literario (o cinematográfico), una página web es como una
criatura de Frankenstein, ya que consiste en la unión (con costuras más o
menos disimuladas) de varias cosas distintas.

La totalidad del código fuente (contenido + instrucciones + enlaces)
consiste en texto, incluso en el caso de páginas Web con contenido de tipo
multimedia. ¿Por qué? Veamos: el contenido consiste, o bien en texto o
bien en enlaces para integrar objetos multimedia. Estos enlaces se expresan
mediante texto. A su vez, las instrucciones consisten siempre en unos
elementos llamados etiquetas que consisten, a su vez, en texto. Por
ejemplo, para integrar una imagen en una página se utiliza la etiqueta
<img>. Para mostrar un texto en cursiva en una página Web se rodea dicho
texto con las etiquetas <em>...</em>, etc.

Visto de otra forma, podemos decir también que la totalidad del código
fuente de una página Web consiste en: (a), el contenido textual; más (b),
etiquetas, que, a su vez, pueden ser de dos tipos:

b1. Instrucciones sobre cómo mostrar la información que contiene el
documento. Ejemplo, la etiqueta <h1> para indicar que el texto en cuestión
es un título de primer nivel, es decir, el título principal del documento. Así,
un contenido rodeado por las etiquetas <h1>, … </h1> provocará que se
muestre en un cuerpo mayor que el resto del texto y en negritas.

b2. Instrucciones sobre cómo integrar elementos a la página web,
típicamente imágenes, pero también facilidades para acceder a otras
páginas web o para abrir otros documentos. Ejemplo, la instrucción <img
src="nombrearchivo"> serviría para incluir una imagen como parte de una
página Web; mientras que la instrucción
<a href="nombrearchivo">...</a> servirá para acceder a un documento
externo, etc.

Naturalmente, no es en absoluto obligatorio ni necesario que una página
Web contenga gráficos. Aclararemos estas ideas con los siguientes
ejemplos.

1.2. Lenguaje XHTML e interpretación de páginas

Los detalles concretos sobre qué etiquetas se pueden utilizar en una página
Web y cómo se utilizan esas etiquetas están establecidos en una norma

(eXtended HyperText Markup

internacional denominada XHTML
Language).

Como XHTML contiene etiquetas, que ya hemos visto que son equivalentes
a palabras, e indicaciones sobre cómo usar esas etiquetas, que equivalen a
una sintaxis, se suele decir que es un lenguaje.

Para que una parte de la información de una pagina Web, por ejemplo, una
parte de la cadena de caracteres "Tercer Congreso sobre Cine Europeo"
aparezca en cursiva (Historia del Cine Europeo), en el documento fuente de
la página Web deberá haber, al menos, dos cosas:

1. El contenido en sí mismo, en este caso, la cadena de caracteres: "Tercer
Congreso sobre Cine Europeo"

2. Las instrucciones, en este caso, la instrucción concreta: "muestra la
cadena de caracteres en negrita"

Estas dos cosas, mediante el lenguaje HTML, se combinan así:

...
Tercer Congreso sobre <em>Cine Europeo</em>
...

El resultado, una vez interpretado por el navegador, se verá así:

...
Tercer Congreso sobre Cine Europeo
...

La
instrucción se ha expresado mediante el par de etiquetas
<em>...</em>. El ejemplo nos muestra, de paso, porqué la mayor parte
(con unas pocas excepciones) de las instrucciones o elementos funcionan
mediante pares de etiquetas. La primera etiqueta del par muestra dónde
empieza a aplicarse la instrucción (<em>), el segundo muestra dónde
acaba la instrucción (</em>).

Ahora bien, ¿qué es lo que ha hecho exactamente el navegador con ese
conjunto de instrucciones e informaciones? Ha hecho lo siguiente: (1) ha
leído la información y las etiquetas que la rodean, (2) ha interpretado las
etiquetas de acuerdo con su intérprete interno de lenguaje XHTML, (3) ha
retirado las etiquetas en el momento de presentar la información en el
monitor y (4) ha formateado el texto de acuerdo con las instrucciones para
presentarlo de manera adecuada en el monitor.

Por tanto, cuando decimos que XHTML es el lenguaje de la Web, lo que
estamos diciendo es que los navegadores Web incluyen un intérprete de
XHTML.

En resumen: para ver el resultado de interpretar el código fuente usamos
el navegador. Para ver el código fuente (texto + instrucciones) abrimos el

documento Web con un editor de texto o usamos la opción específica del
navegador (Ver > Código fuente).

No existe ninguna diferencia, y esto es muy importante, entre una página
Web creada con un programa tan simple como el Bloc de Notas como con
un programa tan sofisticado como Dreamweaver: en rigor, el código fuente
es independiente del programa con el que se haya creado.

Una página Web puede contener elementos multimedia (como gráficos,
sonido, vídeo, etc.) que no forman parte del lenguaje XHTML, pero tales
elementos se enlazan y se incluyen en la página web mediante etiquetas del
lenguaje XHTML.

1.3. Etiquetas y elementos XHTML

Como ya hemos visto, las etiquetas XHTML que contienen las instrucciones
para el navegador, están formadas por los signos “<” y “>” y uno o más
caracteres. Por ejemplo, la etiqueta <h1> (por Heading 1 que significa
Título de nivel 1) sirve para identificar el título principal del documento y
fuerza al navegador Web a mostrarlo con una tipografía determinada
(negritas y un cuerpo grande de texto).

Por ejemplo, el Título principal de una página Web sobre Historia del Cine
Europeo se podría marcar así:

...
<h1>Historia del Cine Europeo</h1>
...

Obsérvese que la etiqueta de cierre se forma añadiendo una barra inclinada
(</h1>. El par de etiquetas XHTML (<h1>, </h1>) más el contenido
afectado por ellas (Historia del Cine Europeo) se denomina elemento. Un
conjunto de elementos forman un documento XHTML o una página Web
(ambos términos son sinónimos en este contexto).

En relación a las etiquetas y elementos, una página Web o un documento
HTML presenta siempre la misma estructura básica:

-

Un indicador inicial y final de que la página contiene código fuente
XHTML (<html>...</html>);
Un elemento de cabecera, (<head>...</head>) inmediatamente
después de la primera etiqueta <html>, y por tanto al inicio del
documento, para contener datos descriptivos (metadatos) sobre el
documento;
el cuerpo del documento en sí (<body>...</body>)

-

-

La estructura global queda así (los puntos suspensivos indican el lugar
donde podría ir el contenido del documento y otras etiquetas XHTML):


Estructura básica de un documento XHTML (sin declaración
DOCTYPE)


<html>
<head>
...
</head>
<body>
...

</body>
</html>


Dentro del elemento <head> y del elemento <body> puede (y debe) haber
otros elementos, por ejemplo, <head> debe contener al menos el elemento
<title>, que, por cierto, no es el mismo tipo de título que el del elemento
<h1> que hemos comentado antes. El contenido de la de la etiqueta <title>
de esta zona es el título que aparece en la barra superior (generalmente de
color azul) del navegador, no el título que aparece dentro de la página del
documento Web. Ejemplos posteriores aclararán esto.

También conviene añadir en la sección <head> etiquetas que informan
sobre el contenido, autor del documento, etc. Estas etiquetas se denominan
meta datos. Se verán más adelante.

Además, el documento debe incluir una declaración técnica denominada
DOCTYPE. En el caso del lenguaje más utilizado actualmente en la creación
de páginas web se trata de la siguiente:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


La (críptica) declaración anterior consiste en dos partes bien diferenciadas:
la designaci