Manual de XHTML

Introducción

XHTML significa Lenguaje de
Marcado de Hipertexto Extendido.

Se utiliza para generar documentos y contenidos de
hipertexto generalmente publicados en la WEB. Es además
una reformulación del lenguaje HTML que se puede jactar de
ser ahora compatible con XML.

Un lenguaje de marcado nos permite dejar indicaciones
(marcas) en un documento que sirven para diferenciar distintos
tipos de contenidos, estructuras o secciones. Por ejemplo hay
marcas (elementos, etiquetas) que pueden "marcar" qué es
un título, y su lugar en una jerarquía de
importancia, o advertir que una palabra debe estar enfatizada, o
bien que una oración es además un enlace hacia otro
recurso.

Todo esto, es posible de marcar sin ambigüedades
con el correcto uso de XHTML.

Otra de sus virtudes es que está ideado para
mantener una saludable separación entre el contenido y el
diseño. Es decir, que uno no afecte al otro, y se puedan
modificar independientemente.

A medida que avancen y conozcan la aplicación de
CSS (hojas de estilo) a los documentos notarán tal
separación de manera evidente.

El XHTML está diseñado para que sea
funcional no sólo a los navegadores sino a varios
dispositivos WEB (teléfonos móviles,
portátiles, etc). A lo largo de este manual haremos uso
del término agente de usuario para referirnos a
estos dispositivos capaces de interpretar documentos
XHTML.

Antes de seguir puedes recorrer estos enlaces en
Internet para tener una introducción más amplia y
conocer algo sobre la historia de estos lenguajes:

• Lenguajes de Marcado

• SGML

• HTML

• XML

• XHTML

• CSS

• W3C (World Wide Web
  Consortium)

NOTA: A lo largo de éste manual muchas
palabras apuntarán a la enciclopedia libre Wikipedia y a
otros sitios, en un intento de poder ofrecer mayor
información o ampliar explicaciones sobre temas y
conceptos que escapan al alcance de los objetivos de este
manual.

Fichero XHTML, editor
y navegador web

El fichero de un documento XHTML, en sí, es un
archivo de texto plano generalmente con alguna de estas
extensiónes: .html, .htm, o bien
.xhtml. Los agentes de usuario interpretan estos archivos
y procesan el código para mostrarlos en
pantalla.

Es conveniente que a medida que aparezcan ejemplos,
practiquen escribiendo sus propios documentos XHTML. Pueden
editar los ficheros utilizando un editor de textos planos como el
bloc de notas de Windows por ejemplo y para poder visualizar los
resultados del documento un navegador web (o cualquier otro
agente de usuario que interprete XHTML).

Utilicen el editor que ustedes quieran, y al guardarlo
se recomienda elegir alguna de estas extensiones, para que su
sistema operativo reconozca rápidamente el tipo de fichero
(.html, .htm, .xhtml.)

La elección del agente de usuario es menos
trivial y se presta a discusión ya que por ejemplo algunos
navegadores no cumplen de manera apropiada con los
estándares (recomendaciones) que la W3C propone y que
intenta respetar este manual.

Personalmente opto por elegir Mozilla Firefox o Chrome,
puedes utilizar el que tú quieras pero asegúrate de
que cumpla mínimamente con los estándares para que
los ejemplos aquí presentados funcionen de manera
apropiada.

Etiquetas

En la escritura de los documentos nos valdremos de
etiquetas (marcas) como principal elemento de sintaxis,
que para diferenciarse del contenido, están encerradas por
paréntesis angulares.

Ejemplo del uso de etiquetas, con el elemento p
(párrafo):

NOTA: Es importante notar el espacio que queda
entre el fin de la palabra y la barra, en la versión
resumida, de esta manera se conserva compatibilidad con algunos
agentes de usuario que no reconocen la etiqueta sin ese
espacio.

Las etiquetas de apertura pueden contener atributos que
especifican características particulares de ésta.
Los atributos tienen un nombre seguido de un igual y entre
comillas el valor de tal atributo.

Ejemplo del elemento a con
atributos:

Con esta etiqueta se construyen los vínculos.
Tanto los elementos, cómo los atributos y valores, deben
escribirse en letras minúsculas. Los valores de los
atributos van obligatoriamente entre comillas (incluso cuando
estos valores sean números).

Los elementos soportan anidamiento (con
algunas condiciones que ya conoceremos).

Ejemplo de anidamiento con los elementos
a e img:

Primer documento
XHTML

Es una declaración XML, dónde
específicamos el atributo enconding con el valor
UTF-8. Este debería ser suficiente en la
mayoría de los casos. Si quieres conocer el por
qué, puedes investigar más sobre: la
codificación de caracteres y UTF-8 en el sitio web de
Wikipedia.

Este es el encabezado que deberían llevar todos
los documentos XHTML1.0 estríctos acordes a las
específicaciones de la W3C. Es un aviso para que el
agente de usuario sepa que tipo de documento va a interpretar.
Para ser más específicos diremos que al ser un
documento de tipo strict.dtd, los elementos utilizados
serán sólo los incluídos en el lenguaje
XHTML 1.0. Si utilizaramos etiquetas antiguas y declararamos el
documento cómo estricto, no podríamos validar
nuestra página XHTML.

NOTA: Fijarse además que hay un salto de
línea a la mitad de la etiqueta, este no es interpretado y
tampoco lo es en el contenido a menos que lo explicitemos con la
etiqueta
/>. Simplemente se incluyen saltos de
línea para hacer el código más
legible.

Hay otros dos tipos de documentos que mantienen
compatibilidad con HTML 4 y soporte de frames, que no
trateremos en este manual, ya que prefiero explicar un uso
más estrícto del lenguaje.

Declaración de documentos
Transitional:

Para la lengua castellana este valor es es.
Puedes averiguar los códigos de otras lenguas en el sitio
web http://es.wikipedia.org/wiki/ISO_639-1.

Al probar el ejemplo sólo veran el texto del
párrafo, mas o menos así:

Primer documento XHTML, es decir un, Hola
mundo

Ejemplo

VER EJEMPLO01.html

NOTA: Haciendo click en el ejemplo consultaran el
ejemplo, pero interpretado por el navegador. Pueden descargarlo
para ver su código fuente.

Encabezados y marcas
de importancia

1.- Encabezados títulos

Los encabezados o títulos se pueden obtener
mediante 6 etiquetas diferentes: h1, h2, h3,
h4, h5 y h6 que tienen una jerarquía
de importancia en la manera en que se representan por los
navegadores. Esto significa que h1 será la etiqueta
del título de mayor importancia lo que se traduce en, por
ejemplo, un tamaño de letra mas grande, h2
representaría un subtítulo con letra más
pequeña y así sucesivamente hasta la etiqueta
h6.

Para dar un ejemplo escribiremos un documento parecido
al anterior, pero mostrando los 6 títulos posibles de
mayor a menor.

VER EJEMPLO02.html.

NOTA: Dependiendo del navegador los
tamaños pueden variar, pero la jerarquía se
mantendrá en todos.

2.- Elemento strong

Semánticamente strong marca contenido al
que se le quiere dar más fuerza o importancia que el
resto. Los navegadores suelen formatearlo en una
tipografía tipo negrita, otros agentes de usuario
podrían indicarlo de maneras diferentes. Es un elemento de
línea.

Ejemplo:

3.- Elemento em

El elemento em agrega énfasis
al contenido. Al igual que strong es un elemento de
línea.

Ejemplo

NOTA: Usualmente los elementos con
énfasis son formateados en tipografía tipo
itálica

Enlaces,
vínculos y Anchor

1. Introducción

2. Primer link

3. Enlace a correo electrónico y
otros recursos

4. Enlaces relativos y absolutos

5. Enlaces hacia anclas en la misma
página

6. El atributo title

7. Atributos rel y rev

7.1. Valor nofollow para rel

7.2. Valor tag para rel
(Technorati)

8. Código con todos los
ejemplos:

9. Ejemplo

1. Introducción

Los enlaces son los que hacen que naveguemos por la Web,
es decir que vayamos saltando por diferentes páginas de un
mismo sitio, o de sitios externos. La etiqueta utilizada para
crear un vínculo es a (anchor).

No necesariamente un enlace apuntará a una
página web, puede por ejemplo apuntar a una imagen, a un
servidor FTP, a cualquier otro tipo de archivo, a un correo
electrónico o incluso puede apuntar a hacia otros sectores
de la misma página (previamente marcando estos
sectores).

2. Primer link

Veamos un ejemplo sencillo:

3. Enlace a correo electrónico y otros
recursos

Como en el caso anterior, veremos en nuestro navegador:
Correo de ejemplo. Si prueban el enlace seguramente su navegador
disparará el cliente de correo por defecto.

Si quieres saber más sobre que URLs puedes
poner en el valor del atributo href puedes leer el
artículo de la Wikipedia, Uniform Resource
Locator.

4. Enlaces relativos y absolutos

Muchas veces para enlaces entre páginas del mismo
sitio y que tengan el mismo dominio, no hace falta utilizar
enlaces absolutos.

Por ejemplo si estamos en la página

Hay que destacar que en este caso hacer enlaces
absolutos (escribiendo la dirección completa)
funcionará también.

NOTA: Algunos buscadores recomiendan utilizar
enlaces absolutos siempre que sea posible, para mejorar la
indexación por parte de sus motores.

5. Enlaces hacia anclas en la misma página

Veamos ahora cómo crear marcas (algunos las
llaman anclas) y enlaces para poder navegar en la misma
página, sistema muy útil para crear un
índice entre documentos largos.

La marca se realiza mediante el atributo
id de la etiqueta a:

Noten el agregado del carácter numeral (#). Este
se incluye ya que también podríamos construir el
enlace utilizando la dirección absoluta lo que
implicaría que necesitamos una separación entre las
anclas y la dirección de la página, ya que la ancla
tiene su propia dirección absoluta, que en este caso
sería:
http://www.example.com/subdirectorio/colegios.html#privados.

NOTA 1: El atributo id para marcar
anclas, se puede utilizar en cualquier etiqueta, sin embargo
puede que algunos navegadores no lo reconozcan como un ancla. Por
eso se suele "anclar" sobre elementos a.

NOTA 2: Es posible también usar el
atributo name de la misma manera que id. La
cuestión se reduce a que algunos viejos navegadores, es
posible que no reconozcan el atributo id.

6. El atributo title

La etiqueta a tiene un atributo de
importante valor semántico, llamado title. El
atributo title sirve para específicar una
pequeña descripción del sitio que estamos
enlazando.

Los navegadores suelen desplegar un
cartelito con el valor de este atributo cuando el usuario
señala con el mouse el enlace. Esto es de gran ayuda a los
usuarios, que decidirán si seguir el enlace o
no.

Se utiliza así:

7. Atributos rel y rev

Estos atributos sirven para enriquecer
semánticamente a los enlaces. Sus objetivos son
funcionalmente inversos.

El atributo rel, sirve para definir el tipo de
relación que tiene el documento contenedor del enlace con
el que éste, está apuntando. Por ejemplo
podríamos utilizarlo de la siguiente manera:

El enlace anterior sería muy
conveniente usarlo, por ejemplo, en la página
pagina_03.html ya que estaríamos indicando
semánticamente que estamos enlazando con la página
que continua el contenido de la actual.

Inversamente podríamos indicar en
pagina_04.html, mediante el elemento link y su
atributo rev qué pagina_03.html es el
documento que precede al actual, para esto le damos el valor
previus.

Vean también una descripción
detallada del uso de de rel y rev.
http://www.ics.uci.edu/~ejw/authoring/draft-ietf-html-relrev-00.txt

7.1. Valor nofollow para rel

Un valor del atributo rel que ha tomado mucha
popularidad en este último tiempo, es el llamado
nofollow. Este fue propuesto por los buscadores
cómo una manera de indicarles que el enlace que lo lleva
puesto no debe ser considerado en los algoritmos que calculan el
posicionamiento de los resultados de búsquedas. El
objetivo de poder dar tal indicación, es luchar contra
spammers que suelen, entre otras cosas, promocionar sus webs
mediante la inserción de enlaces en sitios cómo la
Wikipedia o en los comentarios de los Weblogs.

Ejemplo de su uso:

7.2. Valor tag para rel (Technorati)

Mencionemos ahora otro valor para rel que puede
ser utilizado para agregar etiquetados (tags) a nuestras
páginas, y que es mayoritariamente utilizado por los
blogs. El valor es justamente llamado: tag y su uso es
alentado por sitios como Technorati que cuentan con
tecnología para analizar este tipo de enlaces y poder
categorizar nuestras webs mediante la aplicación de
etiquetas (tags).

Colocando la siguiente línea de código en
una página web estaremos automáticamente
dándole la oportunidad a Technorati de asociar tal
página con la etiqueta animaciones:

8. Código con todos los ejemplos:

Ahora construyamos una página
completa con todos estos ejemplos:

9. Ejemplo

Ver EJEMPLO03.HTML

NOTA: Dentro de un párrafo vacio incluimos
varios saltos de línea para que una de las anclas se
desplace lo suficiente de la otra, para notar el efecto de
navegar en la misma página.

Código fuente:

Sigue habiendo muchos temas a tratar sobre
enlaces, espero con el tiempo poder seguir ampliando este
documento.

Citas, abreviaturas y
acrónimos

1. Citas

En muchos documentos citaremos texto desde otras
fuentes. Para especificar que estamos citando algún
contenido desde otra fuente disponemos de dos etiquetas que se
diferencian entre sí en el modo en que se
presentará el contenido citado dentro del
documento.

2. Citas con

La etiqueta blockquote, generalmente
se utiliza para contener un párrafo ( p ) con un
texto citado. El contenido citado se contendrá en un
bloque que usualmente el navegador lo presentará con una
tabulación mayor al resto de los
párrafos.

Ejemplo:

La anterior cita, tendrá dos saltos
de línea, por encima y por debajo, de la apertura y del
cierre del elemento blockquote respectivamente, ya que
conforma un bloque. Si queremos citar sin estos saltos de
línea debemos usar el elemento cite.

3. Citas con

Veamos ahora como citar en la misma
línea en la que estamos escribiendo, que suele utilizarce
para pequeños trozos de texto.

Al utilizar este elemento la línea
no se interrumpe como sucedería con blockquote que
podría resultar molesto para una cita tan
corta.

4. Abreviaturas

Al escribir la abreviatura de una palabra
podemos valernos del elemento abbr para marcarla e indicar
en el atributo title qué palabra estamos
abreviando, los navegadores en general se encargarán de
que al apoyar el puntero del mouse sobre la abreviatura se
muestre un cartel con la palabra no abreviada que
indicamos.

5. Acrónimos

Los acrónimos se marcan con el elemento
acronym, tienen el atributo title, y generalmente,
el mismo comportamiento que abbr en los
navegadores.

NOTA: Fijarse que en la segunda línea
introducimos el valor en para el atributo
xml:lang, este le indica que el acrónimo
está escrito en lengua inglesa. Generalmente todas
nuestras etiquetas soportan tal atributo, sin embargo no siempre
es necesario escribirlo ya que las etiquetas heredan el valor
específicado del elemento

(u otros elementos superiores). En nuestro caso el valor
puesto en el elemento html era "es" por lo que
nos vemos obligados a cambiarlo en esta etiqueta
específica.

6. Código del ejemplo

El siguiente código es el de un
documento XHTML que contiene todos los ejemplos
expuestos:

7. Ejemplo

Ver el EJEMPLO04.HTML

Imágenes

1. Imagenes formatos

2. El elemento img

3. Altura y ancho

4. Alineación de las imagenes (con
atributo align)

5. Alineación de las imagenes (con
propiedad float)

5.1. float: right

5.2. float: left

1. Imagenes formatos

Además de texto, podemos incorporar al contenido
de nuestros documentos XHTML archivos de animaciones,
imágenes que pueden contener fotografías, dibujos,
diagramas, etc.

Hay una seria discusión acerca de que formato de
imagenes es conveniente utilizar para el empleo en la web, que
incluye temas variados y complejos cómo: algoritmos de
compresión de imagenes, patentes,
calidad, y compatibilidad. Personalmente me
inclino por el uso de las imagenes libres de patentes PNG.
Perto te recomiendo que amplies el tema para que puedas decidir
que tipo de imagen utilizar según el caso, en los
siguientes artículos de la Wikipedia:

• Formato PNG

• Formato JPEG

• Formato GIF

2. El elemento img

El elemento para insertar imagenes es
img. Su principal atributo es src (de source).
Este atributo lleva como valor la dirección (relativa o
absoluta) de la ubicación de la imagen.

Ejemplo de uso de img:

Resultado:

Notar la barra antes de cerrar el parentesis angular.
Como ya hemos mencionado esta es necesaria ya que en XHTML todos
los elementos deben cerrarse aunque no contengan contenido, por
eso utilizamos esta sintaxis para abrir y cerrar el elemento en
la misma etiqueta.

Además hemos puesto el valor Tux, el pinguino
de Linux al atributo alt, este debe explicar en
palabras el contenido de la fotografía. Los agentes de
usuario basados en texto mostrarán el valor del atributo
en vez de la imagen, otros agentes de usuarios para no videntes
podrían leer y reproducir con un sintetizador el valor del
atributo. Es muy recomendable su uso, ya que además si la
imagen por cualquier motivo no puede ser mostrada, se
presentará el valor de alt en lugar de la
imagen.

3. Altura y ancho

Podemos además específicar la altura y el
ancho de la imagen, mediante el uso de los atributos
height y width respectivamente.

En el ejemplo anterior mostramos cómo incorporar
una imagen a nuestro documento sin específicar estos
atributos, el problema de hacerlo de ese modo, es que el agente
de usuario no podrá calcular el espacio que ocupará
la imagen hasta que no termine de obtenerla. Esto podría
resultar en una carga más lenta del renderizado final de
la página. Es muy conveniente averiguar el tamaño
de nuestras imagenes en píxeles y especificarlo en los
atributos height y width.

Ejemplo:

El resultado es el mismo que
antes:

Otro motivo para el uso de estos atributos,
podría ser que querramos un cambio en las dimensiones y no
usar el tamaño de la imagen original, para tal, tengamos
en cuenta las siguientes consideraciones:

Si achicamos el ancho y la altura, lo haremos
sólo en la apariencia del documento. El archivo
mantendrá el tamaño original, por lo que
podríamos estar gastando recursos innecesariamente. Lo
conveniente sería editar y reajustar el tamaño de
la imagen con algún software de edición de imagenes
(por cierto The Gimp es muy bueno y es software GNU).

Ejemplo:

Resultado:

El caso inverso (aumentar las dimensiones) podría
lograr un efecto no deseado que es la "pixelización" (algo
así como una notable pérdida de calidad) de la
imagen. De nuevo es recomendable conseguir imágenes
apropiadas y no valerse de estos atributos para obtener
imágenes más grandes.

Ejemplo:

En el resultado noten los bordes
"pixelados":

Observemos también que deberíamos mantener
las proporciones al cambiar los valores originales de la imagen
mediante height y width, si no deseamos deformar el aspecto
original. Una buena idea podría ser sólo reducir o
aumentar uno sólo de los valores, luego el agente de
usuario calculará y asignará el valor
correspondiente a esa proporción para el atributo no
específicado (aunque para calcular el espacio
debería obtener la imagen primero, con la consecuente
perdida de tiempo en el renderizado final del
documento).

Ejemplo:

El resultado es la deformación de la
imagen:

Con un valor ausente:

Ahora se mantiene la proporción ya
que el valor ausente de width es calculado
automáticamente:

4. Alineación de las imágenes (con atributo
align)

El elemento img también soporta el
atributo align, su uso no es recomendado, y se recomienda
el uso de la propiedad float de CSS. Sin embargo esta
propiedad aún no es soportada por todos los navegadores,
veremos ejemplos del uso del atributo align.

NOTA: Para mantener este documento acorde al
estrícto uso de elementos XHTML 1.0, se
mostrarán en otra página los usos del atributo
align

Uso del atributo align (en otra pagina)

5. Alineación de las imágenes (con propiedad
float)

Para acomodar las imagenes sin el uso del
atributo align, podemos valernos del atributo style
que permite especificar propiedades CSS de un elemento, en
este caso img.

Veamos algunos ejemplos:

5.1. float: right

Si en lugar de los 3 puntos ponemos algo de
texto, obetendríamos este resultado:

Tux es el nombre de la mascota oficial del
kernel Linux. Tux es un pequeño pingüino de aspecto
risueño. La idea de que la mascota de Linux fuera un
pingüino provino del mismo Linus Torvalds, creador de Linux.
Según se cuenta, cuando era niño le picó un
pingüino, y le resultó simpática la idea de
asociar un pingüino a su proyecto. Existen dos versiones
sobre el origen de su nombre. La primera sugiere que el nombre
surge del hecho de que los pingüinos parecen vestir un
esmoquín (en inglés tuxedo). La segunda es que las
letras que componen Tux provienen de las palabras Torvalds
Unix.

5.2. float: left

De nuevo un resultado parecido, pero
alineada la imagen en el otro extremo:

Tux es el nombre de la mascota oficial del
kernel Linux. Tux es un pequeño pingüino de aspecto
risueño. La idea de que la mascota de Linux fuera un
pingüino provino del mismo Linus Torvalds, creador de Linux.
Según se cuenta, cuando era niño le picó un
pingüino, y le resultó simpática la idea de
asociar un pingüino a su proyecto. Existen dos versiones
sobre el origen de su nombre. La primera sugiere que el nombre
surge del hecho de que los pingüinos parecen vestir un
esmoquín (en inglés tuxedo). La segunda es que las
letras que componen Tux provienen de las palabras Torvalds
Unix.

Listas

1. Introducción

2. Listas ordenadas y numeradas

2.1. Diferentes tipos de listas
ordenadas

3. Listas desordenadas

3.1. Diferentes tipos de listas
desordenadas

4. Listas de definiciones

5. Listas compuestas mediante
anidamiento

1. Introducción

Las listas ofrecen la posibilidad de presentar cierto
tipo de información de una manera útil y simple. No
sólo para ordenarla, sino también entre otras cosas
para jerarquizarla, o numerarla. Para estos usos, XHTML
nos permite construir diferentes tipos de listas, ya sea simples,
o bien compuestas utilizando anidamiento de etiquetas.

Por ofrecer un ejemplo inmediato, resaltamos que los
índices mismos de este manual utilizan listas para
mostrarse.

2. Listas ordenadas y numeradas

Al utilizar este tipo listas, los agentes de usuario se
encargarán de agregar una numeración a cada item
que por defecto suele ser decimal, creciente y empezando en
1.

Veamos el siguiente
código:

Este código representa una lista ordenada
numéricamente, con instrucciones potenciales para
conquistar el mundo.

Veamos cómo queda
formateada:

El elemento ol contiene los ítems de la
lista que a su vez están contenidos por el elemento
li. A cada ítem introducido se le asignará
un número empezando por 1.

2.1. Diferentes tipos de listas ordenadas

3. Listas desordenadas

Si cambiamos el elemento ol por el elemento
ul, obtendremos un efecto parecido, sólo que
ésta vez las listas no se presentarán con
ningún tipo de ordenamiento o numeración, sino con
un viñetado.

Por ejemplo observemos este
código:

Que va a quedar representado
así:

• Universidad Privada de Tacna

• Universidad de Buenos Aires

• Instituto tecnológico de buenos
  aires

Cómo ven tenemos una lista construida con
ul y dónde además cada uno de sus
ítems tiene anidado un enlace. No hay ningún tipo
de numeración y aunque el orden en como fueron
introducidos los ítems se mantiene, no tiene ninguna
importancia (recordemos que no hablamos de representación
sino de valor semántico, si el orden importara
deberíamos usar ol).

3.1. Diferentes tipos de listas desordenadas

De nuevo debemos decir que específicar tipos de
listas mediante el atributo type, no es recomendable. Por
el momento veremos como hacerlo en otra página. Luego
veremos de que manera es conveniente mediante la
aplicación de hojas de estilo CSS.

Ver tipos de listas desordenadas mediante
type en otra página.

4. Listas de definiciones

Con este tipo es posible construir listas de
definiciones. Cada ítem de una lista de definición
contiene dos secciones, la primera es el contenido (ej. una
palabra, una imagen, etc) a definir, y la segunda la
definición de la primera. Se construyen con el elemento
dl.

Ejemplo de código:

La cual se representará
así:

Cómo sospecharán, el elemento dt
marca el término a defirnir, y el elemento dd,
marca la definición del anterior.

Debido a que no llevan ni viñetas ni
numeración las listas de definición no tienen
diferentes tipos, aunque sí podremos modificar su
apariencia con la aplicación de hojas de
estilo.

5. Listas compuestas mediante anidamiento

Podemos anidar varias listas a otras y de diferentes
tipos sin restricciones. La sintaxis es sencilla.

Ejemplo de una lista ordenada con 3 items, el primero
normal, el segundo con una lista de definición anidada, y
el tercero con otra lista desordenada (que a su vez tiene otro
grado de anidamiento). Lo dicho:

Y el resultado es:

Texto
preformateado

• 1. Elemento pre

• 2. Elemento code

1. Elemento pre

En algunas ocasiones podríamos necesitar
incluír el contenido de un archivo de texto sin perder el
formato, es decir conservando los saltos de línea y el
espaciado original. Para esto contamos con el elemento
pre, que permite representar texto ya
preformateado.

Uno de los usos más comunes de este elemento, es
la inclusión de código fuente dentro de nuestros
documentos. Los navegadores, suelen representar el contenido de
la etiqueta pre mediante una fuente
monoespaciada.

Ejemplo incluyendo código
fuente:

Y el resultado sería:

NOTA: Observar que se respetan en la
representación todos los espacios y tabulaciones
incluídos, y que no hace falta el uso del elemento de
salto de línea br.

2. Elemento code

Hay que tener en cuenta que pre es un elemento en
bloque, por lo que no se puede incluír en una
línea sin romperla. El elemento equivalente en
línea es code, que obviamente no conserva
el formato (ya que no puede romper la línea), pero sigue
siendo una indicación semántica de la
inclusión de código. Además los agentes de
usuario suelen representar el contenido de code con letra
monoespaciada.

Ejemplo de uso de code:

Cómo notaran incluímos varios
etiquetados con code que no rompieron el bloque del
elemento superior, párrafo (p).

Tablas

1. Introducción

2. Ejemplo sencillo

3. El atributo summary

4. El pie de la tabla (footer)

5. Elementos de una tabla
gráficamente

1. Introducción

Las tablas son una interesante herramienta para el
marcado de información tabular, otros usos y abusos
(como maquetación y diseño) se desaconsejan
encarecidamente. De nuevo: mantener por separado, el
diseño del contenido.

2. Ejemplo sencillo

Veamos un poco de código para
empezar a hablar de tablas:

El resultado es el siguiente:

NOTA: cuando pruebes este ejemplo no verás
bordes, aquí son mostrados mediante una propiedad
CSS que explicaré más adelante.

El elemento table da comienzo a la tabla. Dentro
tenemos a caption que encierra el título que
llevará la tabla.

A partir de aquí definimos dos partes
principales: thead dónde se ubica el encabezado, y
tbody que encierra a las celdas del cuerpo.

tr es el encargado de contener filas, el
encabezado tiene una sola fila, cuyas celdas de encabezado se
contienen mediante tres etiquetas del elemento
th.

Luego dentro del cuerpo (tbody) tenemos 3 filas
más (tr) cuyas celdas se contienen mediante el uso
del elemento td.

3. El atributo summary

El atributo summary se puede específicar
dentro del elemento table, este nos permite agregar algo
de semántica, al ponerle como valor un resumen del
contenido de la tabla para que pueda ser reconocido por robots
(ej. buscadores) u otros agentes de usuario.

Ejemplo de su uso:

Los navegadores no suelen representar
summary.

4. El pie de la tabla (footer)

Vimos en el ejemplo anterior como dividir la tabla en
dos secciones, mediante los elementos thead y
tbody.

Ahora incluyamos una tercera sección con el
elemento tfoot, el cual determinará la
sección del pie (al final de la tabla).

Utilizamos un código parecido al anterior, pero
con la sección foot y otros datos.

El resultado es el siguiente:

NOTA: Estos datos son inventados y
las sumas no fueron verificadas

En estos ejemplos podríamos haber omitido marcar
secciones (encabezado, cuerpo, pie) y la tabla tendría el
mismo aspecto, sin embargo marcar estas secciones no sólo
la dotarán de un valor semántico sino que
también nos facilitará mucho la aplicación
de estilos a estos grupos de celdas.

Notar también que en la sección
tfoot la celda Total fue marcada con th ya
que no es un dato estádistico.

5. Elementos de una tabla gráficamente

Quizá los maree un poco seguir la estructura de
la tabla en el código, para ayudar aquí tienen un
gráfico que muestra la tabla anterior visualmente y los
elementos utilizados para construirla

Nota: gráfico creado con
Kivio, software gratuito para el entorno KDE.

Formularios

1. Introducción

2. Dos métodos post y get

2.1. Método get

2.2. Método post

3. Empezando con form

4. Elemento input

5. Campos de texto

6. Botones de radio

7. Botón de comprobación
checkbox

8. Botones de envió y de
reset

9. Cajas de texto

10. Seleccionar con select

11. Elemento label

12. Agrupando con fieldset

1. Introducción

Los formularios nos dan la posibilidad de recibir
información de parte del usuario. Su utilización
nos permitirá construir formularios de entrada de datos
que podríamos recibir en nuestro e-mail o bien almacenar
en una base de datos dentro de nuestro servidor, para luego por
ejemplo, generar una página o una cookie de manera
dinámica.

2. Dos métodos post y get

Hay dos métodos de envío de
información mediante formularios que trataremos
aquí: post y get.

2.1. Método get

El método get envía
información al servidor como parte de la URL. El
servidor analizará la URL pedida por el agente de
usuario y separará la información relevante para su
posterior procesamiento.

El signo ? es el delimitador que nos permite
separar la consulta de la URL. busqueda
podría ser un programa CGI que recibirá la
información posterior a ? e interpretará tal
cadena para crear una variable palabra = xhtml.
En muchos casos sencillos y para enviar cádenas de pocos
carácteres este método funciona bien, sin embargo
para otros casos es mejor utilizar otro método de
envio.

2.2. Método post

Supongamos que quisieramos enviar una contraseña
para loguearnos dentro de un servidor. No sería
conveniente que la contraseña aparezca en la URL
ya que otras personas podrían ver esta
información.

Generalmente en este caso correspondería utilizar
el método de envio post. Este método
envía la información como parte de la
petición del agente de usuario al servidor web (esta
petición también incluye la URL, sin
embargo nuestra información no formará parte de
ella).

3. Empezando con form

El elemento principal y obligatorio de todo formulario
es form y quizá sus dos atributos más
importantes son method y action. El primero
específica el método de envio (get o bien
post), y en el segundo pondremos la URL del
recurso que contendrá la secuencia de comandos encargada
de hacer algo con esa información.

Sin embargo un formulario sin otros elementos no nos
sirve de mucho. Hagamos entonces un recorrido por los elementos
más comunes:

4. Elemento input

Ahora presentaremos al elemento input, que al
especificarle su atributo type nos permite construir
diferentes tipos de controles.

5. Campos de texto

Código para construir dos campos de
texto: