Introducción

XHTML

por

Ing. Maria Paola Abella

Martinez
 CONTENIDO

HTML ............................................................................................................................................................... 2

LISTAS ........................................................................................................................................................ 2

LISTAS NO ORDENADAS ......................................................................................................................... 3

LISTAS ORDENADAS .............................................................................................................................. 4

LISTAS DE DEFINICIÓN .......................................................................................................................... 5

TABLAS ...................................................................................................................................................... 6

TABLAS BÁSICAS .................................................................................................................................... 6

TABLAS COMPLEJAS ............................................................................................................................... 8

ENLACES ..................................................................................................................................................... 9

URL ..................................................................................................................................................... 10

ENLACES RELATIVOS Y ABSOLUTOS......................................................................................... 11

ENLACES BASICOS .......................................................................................................................... 14

OTROS TIPOS DE ENLACES............................................................................................................ 18

FORMULARIOS ......................................................................................................................................... 20

ELEMENTOS BÁSICOS DE LOS FORMULARIOS .................................................................................... 20

FORMULARIOS AVANZADOS ................................................................................................................. 29

1
 XML XHTML HTML5

HTML

El lenguaje XHTML es muy similar al lenguaje HTML. De

hecho, XHTML no es más que una adaptación de HTML al
lenguaje XML. Técnicamente, HTML es descendiente directo
del lenguaje SGML, mientras que XHTML lo es del XML (que
a su vez, también es descendiente de SGML).
Actualmente, entre HTML 4.01 y XHTML 1.0, la mayoría de
diseñadores escogen XHTML. En un futuro cercano, si los
diseñadores deben elegir entre HTML 5 y XHTML 1.1 o
XHTML 2.0, quizás la elección sea diferente.

LISTAS

En ocasiones, es posible agrupar determinadas palabras o

frases en un conjunto de elementos que tienen más
significado de forma conjunta. El menú de navegación de un
sitio web por ejemplo está formado por un grupo de palabras.
Aunque cada palabra por separado tiene sentido, de forma
conjunta constituyen el menú de navegación de la página, por
lo que su significado conjunto es mayor que por separado.
El lenguaje HTML define tres tipos diferentes de listas para
agrupar los elementos: listas no ordenadas (se trata de una
colección simple de elementos en la que no importa su
orden), listas ordenadas (similar a la anterior, pero los
elementos están numerados y por tanto, importa su orden) y
listas de definición (un conjunto de términos y definiciones
similar a un diccionario).

2
 LISTAS NO ORDENADAS

Las listas no ordenadas son las más sencillas y las que más
se utilizan. Una lista no ordenada es un conjunto de
elementos relacionados entre sí pero para los que no se
indica un orden o secuencia determinados. La etiqueta <ul>
encierra todos los elementos de la lista y la etiqueta <li> cada
uno de sus elementos.
El siguiente código HTML muestra un ejemplo sencillo de lista
no ordenada:

Nos quedará de la siguiente manera:

3
 LISTAS ORDENADAS

Las listas ordenadas son casi idénticas a las listas no

ordenadas, salvo que en este caso los elementos
relacionados se muestran siguiendo un orden determinado.
En todos estos casos, la lista más adecuada es la lista
ordenada, que se define mediante la etiqueta <ol>, Los
elementos de la lista se definen mediante la etiqueta <li>, la
misma que se utiliza en las listas no ordenadas.
El siguiente código HTML muestra un ejemplo sencillo de lista
ordenada:

Nos quedará de la siguiente manera:

4
 LISTAS DE DEFINICIÓN

Las listas de definición apenas se utilizan en la mayoría de

páginas HTML. Su funcionamiento es similar al de un
diccionario, ya que cada elemento de la lista está formado por
términos y definiciones. La etiqueta <dl>crea la lista de
definición y las etiquetas <dt> y <dd> definen
respectivamente el término y la descripción de cada elemento
de la lista.
El siguiente código HTML muestra un ejemplo sencillo de lista
de definición:

Nos quedará de la siguiente manera:

5
 TABLAS

Desde sus primeras versiones, HTML incluyó el soporte para

crear tablas de datos en las páginas web. Además de ser
sencillo, el modelo definido por HTML es muy flexible y
bastante completo.
Las tablas en HTML utilizan los mismos conceptos de filas,
columnas, cabeceras y títulos que los que se utilizan en
cualquier otro entorno de publicación de documentos:
Las tablas de HTML pueden contener elementos simples,
agrupaciones de filas y de columnas, cabeceras y pies de
tabla, subdivisiones, cabeceras múltiples y otros elementos
complejos.

TABLAS BÁSICAS

Las tablas más sencillas de HTML se definen con tres

etiquetas: <table> para crear la tabla, <tr> para crear cada fila
y <dt> para crear cada columna

6
 A continuación se muestra el código HTML de una tabla
sencilla:

Nos quedará de la siguiente manera:

7
 TABLAS COMPLEJAS

Las tablas complejas suelen disponer de una estructura

irregular que junta varias columnas para formar una columna
ancha o une varias filas para formar una fila más alta que las
demás. Para fusionar filas o columnas, se utilizan los atributos
rowspan y colspan respectivamente.

La siguiente imagen muestra una tabla compleja que ha

fusionado dos columnas y dos filas simples para formar una
columna y una fila más ancha:

8
 ENLACES

Los enlaces se utilizan para establecer relaciones entre dos

recursos. Aunque la mayoría de enlaces relacionan páginas
web, también es posible enlazar otros recursos como
imágenes, documentos y archivos.

Una característica que no se suele tener en cuenta en los

enlaces es que están formados por dos extremos y un
sentido. En otras palabras, el enlace comienza en un recurso
y apunta hacia otro recurso. Cada uno de los dos extremos se

9
 llaman "anchors" en inglés, que se puede traducir literalmente
como "anclas".

URL

Antes de empezar a crear enlaces, es necesario comprender

y dominar el concepto de URL. El acrónimo URL (del inglés
Uniform Resource Locator) hace referencia al identificador
único de cada recurso disponible en Internet. Las URL son
esenciales para crear los enlaces, pero también se utilizan en
otros elementos HTML como las imágenes y los formularios.

La URL de un recurso tiene dos objetivos principales:

 Identificar de forma única a ese recurso

 Permitir localizar de forma eficiente ese recurso

Las partes que componen la URL anterior son:

 Protocolo (http://): el mecanismo que debe utilizar el

navegador para acceder a ese recurso. Todas las
páginas web utilizan http://. Las páginas web seguras
(por ejemplo las de los bancos y las de los servicios de
email) utilizan https:// (se añade una letra s).
 Servidor (www.librosweb.es): simplificando mucho su
explicación, se trata del ordenador en el que se
encuentra guardada la página que se quiere acceder.
Los navegadores son capaces de obtener la dirección
de cada servidor a partir de su nombre.
 Ruta (/xhtml/capitulo4.html): camino que se debe
seguir, una vez que se ha llegado al servidor, para
localizar el recurso específico que se quiere acceder.

Por tanto, las URL no sólo identifican de forma única a

cada recurso de Internet, sino que también proporcionan a
los navegadores la información necesaria para poder llegar
hasta ese recurso. La mayoría de URL son tan sencillas
como la URL mostrada anteriormente.

10
 No obstante, existen URL complejas formadas por más
partes.

http://www.alistapart.com/comments/webstandards
2008?page=5#42

Las cinco partes que forman la URL anterior son:

 Protocolo (http://)
 Servidor (www.alistapart.com)
 Ruta (/comments/webstandards2008)
 Consulta (?page=5): información adicional necesaria
para que el servidor localice correctamente el recurso
que se quiere acceder. Siempre comienza con el
carácter ? y contiene una sucesión de palabras
separadas por = y &
 Sección (#42): permite que el navegador se posicione
automáticamente en una sección de la página web.
Siempre comienza con el caracter #

ENLACES RELATIVOS Y ABSOLUTOS

Las páginas web habituales suelen contener decenas de

enlaces de diferentes tipos. La siguiente imagen muestra
algunos de los tipos de enlaces de la página principal del sitio
web www.thinkvitamin.com:

Ejemplo de diferentes tipos de enlaces en la página

11
 En esa página, cuando se pincha sobre algunos enlaces, el
navegador abandona el sitio web para acceder a páginas que
se encuentran en otros sitios. Estos enlaces se conocen como
"enlaces externos". Sin embargo, la mayoría de enlaces de un
sitio web apuntan a páginas del propio sitio web, por lo que se
denominan "enlaces internos".

Además de internos/externos, la otra característica que

diferencia a los enlaces (y por tanto, también a las URL) es si
el enlace es absoluto o relativo. Las URL absolutas incluyen
todas las partes de la URL (protocolo, servidor y ruta) por lo
que no se necesita más información para obtener el recurso
enlazado.

Las URL relativas prescinden de algunas partes de las URL

para hacerlas más breves. Como se trata de URL
incompletas, es necesario disponer de información adicional
para obtener el recurso enlazado. En concreto, para que una
URL relativa sea útil es imprescindible conocer la URL del
origen del enlace.

Las URL relativas se construyen a partir de las URL absolutas

y prescinden de la parte del protocolo, del nombre del servidor
e incluso de parte o toda la ruta del recurso enlazado. Aunque
las URL relativas pueden ser difíciles de entender para los
que comienzan con HTML, son tan útiles que todos los sitios
web las utilizan.

Imagina que dispones de una página publicada en

http://www.ejemplo.com/ruta1/ruta2/ pagina1.html y quieres
incluir en ella un enlace a otra página que se encuentra en
http://www.ejemplo.com/ruta1/ruta2/pagina2.html. Como las
URL identifican de forma única a los recursos de Internet y
proporcionan la información necesaria para llegar hasta ellos,
el enlace debería utilizar la URL completa de la segunda
página.

12
 Las URL completas también se llaman URL absolutas, ya que
el navegador no necesita disponer de información adicional
para localizar el recurso enlazado. Si se utilizan siempre las
URL absolutas, los enlaces están completamente definidos.

Sin embargo, escribir siempre las URL completas es bastante

aburrido, cuesta mucho tiempo y hace imposible cambiar la
ubicación de los contenidos de un sitio web. Por ese motivo,
casi todos los sitios web de Internet utilizan URL relativas
siempre que es posible.

Una URL relativa es una versión abreviada de una URL

absoluta. Su objetivo es eliminar todas las partes de la URL
absoluta que se pueden adivinar a partir de la información de
contexto de la página web. En otras palabras, las URL
relativas aprovechan la inteligencia de los navegadores para
crear URL incompletas que los navegadores pueden
completar deduciendo la información que falta.

Considerando de nuevo el ejemplo anterior, la URL a la que

se quiere enlazar utiliza el mismo protocolo y se encuentra en
el mismo servidor que la página origen, por lo que la URL
relativa puede prescindir de esas partes:

URL absoluta:
http://www.ejemplo.com/ruta1/ruta2/pagina2.html

URL relativa:

/ruta1/ruta2/pagina2.html

En el ejemplo anterior, las dos URL son equivalentes porque

cuando no se indica el protocolo y el servidor de una URL, los
navegadores suponen que son los mismos que los de la
página origen. Por lo tanto, cuando el navegador encuentra la
URL /ruta1/ruta2/pagina2.html, realiza el siguiente proceso:

1. La URL no es absoluta, por lo que se debe determinar la

URL absoluta a partir de la URL relativa para poder cargar el
recurso enlazado.

13
 2. A la URL relativa le falta el protocolo y el servidor, por lo
que se supone que son los mismos que los de la página
origen (http:// y www.ejemplo.com).

3. Se añaden las partes que faltan a la URL relativa para

obtener la URL absoluta: http:// + www.ejemplo.com +
/ruta1/ruta2/pagina2.html = http://www.ejemplo.com/ruta1/
ruta2/pagina2.html.

Aunque el ejemplo mostrado es el caso más sencillo de URL

relativa, existen otros casos más avanzados en los que se
prescinde de parte o toda la ruta del recurso que se enlaza. A
continuación se muestran los cuatro tipos diferentes de URL
relativas:

 El origen y el destino del enlace se encuentran en el

mismo directorio

Si desde una página web se quiere enlazar un recurso que se

encuentra en el mismo directorio del servidor, la URL relativa
puede prescindir de todas las partes de la URL absoluta salvo

el nombre del recurso enlazado.

ENLACES BASICOS

14
 Los enlaces en HTML se crean mediante la etiqueta <a> (su
nombre viene del inglés "anchor", literalmente traducido como
"ancla"). A continuación se muestra la definición simplificada
de <a> y más adelante se muestra su definición completa:

El atributo más importante de la etiqueta es href, que se utiliza

para indicar la URL a la que apunta el enlace. Cuando el
usuario pincha sobre un enlace, el navegador se dirige a la
URL del recurso indicado mediante href. Las URL de los
enlaces pueden ser absolutas, relativas, internas y externas.

Con la definición anterior, para crear un enlace que apunte a

la página principal de Google solamente habría que incluir lo
siguiente en un documento HTML:

< a href=”http:// /www.google.com">Página principal de

Google”</a>

Como el atributo href indica una URL, un enlace puede

apuntar a cualquier tipo de recurso al que pueda acceder el
navegador. El siguiente enlace apunta a una imagen, que se
mostrará en el navegador cuando el usuario pinche sobre el
enlace:

<a href= "http://

www.ejemplo.com/fondo_escritorio.jpg">Imagen
interesante para un fondo de escritorio ></a>

De la misma forma, los enlaces pueden apuntar directamente

a documentos PDF, Word, etc.

15
 Un truco muy útil con los enlaces es el uso de URL relativas
para poder volver al inicio del sitio web desde cualquier
página web interior:

El enlace anterior utiliza una URL relativa con una ruta que
apunta directamente a la raíz del servidor. Para obtener la
URL absoluta, el navegador añade el mismo protocolo y el
mismo nombre de servidor de la página en la que se
encuentra el enlace. El resultado es que cuando se pincha
ese enlace, siempre se vuelve al inicio del sitio web,
independientemente de la página en la que se incluya el
enlace.

El otro atributo básico de la etiqueta es<a> name, que

permite definir enlaces dentro de una misma página web. Si
una página es muy larga, puede ser útil mostrar enlaces de
tipo "Saltar hasta la segunda sección", "Volver al principio de
la página", etc.

Este tipo de enlaces son especiales, ya que la URL de la

página siempre es la misma para todas las secciones y por
tanto, debe añadirse otra parte a las URL para identificar cada
sección.

16
 El atributo name permite crear "enlaces vacíos" que hacen
referencia a secciones dentro de una misma página. Una vez
definidos los "enlaces vacíos", es posible crear un enlace que
apunte directamente a una sección concreta de una página:

La sintaxis que se utiliza con estos enlaces es la misma que

con los enlaces normales, salvo que se añade el símbolo #
seguido del nombre de la sección a la que se apunta. Cuando
el usuario pincha sobre uno de estos enlaces, el navegador
accede a la página apuntada por la URL y baja directamente
a la sección cuyo nombre se indica después del símbolo #.

También es posible utilizar este tipo de enlaces con URL

relativas en una misma página. El siguiente ejemplo añade
enlaces de tipo "Volver al inicio de la página" en varias
secciones:

Los enlaces directos a secciones también funcionan con el

atributo id de cualquier elemento. El siguiente ejemplo es

17
 equivalente al ejemplo anterior:

OTROS TIPOS DE ENLACES

ENLACE AL INICIO DEL SITIO WEB

<a href "/">Inicio</a>

Al pulsar el enlace anterior desde cualquier página web, se

vuelve directamente a la página de inicio, home o página
principal del sitio web.

ENLACE A UN EMAIL

Al pinchar sobre el enlace anterior, se abre automáticamente

el programa de correo electrónico del ordenador del usuario y
se establece la dirección de envío al valor indicado después
de mailto: La sintaxis es la misma que la de un enlace normal,
salvo que se cambia el prefijo http:// por mailto:

18
 La sintaxis de mailto: permite utilizarlo para otros ejemplos
más complejos:

ENLACE A UN ARCHIVO FTP

Para enlazar un archivo almacenado en un servidor FTP, la

parte del protocolo de la URL debe cambiar de http:// a ftp://:

ENLAZAR VARIAS HOJAS DE ESTILOS CSS

ENLAZAR HOJAS DE ESTILOS CSS PARA DIFERENTES

MEDIOS

19
 FORMULARIOS

HTML es un lenguaje de marcado cuyo propósito principal

consiste en estructurar los contenidos de los documentos y
páginas web. Sin embargo, HTML también incluye elementos
para crear aplicaciones web. El estándar HTML/XHTML
permite crear formularios para que los usuarios interactúen
con las aplicaciones web.

ELEMENTOS BÁSICOS DE LOS FORMULARIOS

Los formularios más sencillos se pueden crear utilizando

solamente dos etiquetas: <form> Principio del formulario y
<input>.

CUADRO DE TEXTO

Se trata del elemento más utilizado en los formularios. En el

caso más sencillo, se muestra un cuadro de texto vacío en el
que el usuario puede escribir cualquier texto.

20
 A continuación se muestra el código HTML de un cuadro de
texto:

Nos quedará de la siguiente manera:

CUADRO DE CONTRASEÑA

La única diferencia entre este control y el cuadro de texto

normal es que el texto que el usuario escribe en un cuadro de
contraseña no se ve en la pantalla. En su lugar, los
navegadores ocultan el texto utilizando asteriscos o círculos,
por lo que es ideal para escribir contraseñas y otros datos
sensibles.

21
 A continuación se muestra el código HTML de un cuadro de
contraseña

Nos quedará de la siguiente manera:

CHECKBOX

Los checkbox o "casillas de verificación" son controles de

formulario que permiten al usuario seleccionar y
deseleccionar opciones individualmente. Aunque en
ocasiones se muestran varios checkbox juntos, cada uno de
ellos es completamente independiente del resto. Por este
motivo, se utilizan cuando el usuario puede activar y
desactivar varias opciones relacionadas pero no excluyentes.

22
 A continuación se muestra el código HTML de un checkbox

Nos quedará de la siguiente manera:

23
 RADIOBUTTON

Los controles de tipo radiobutton son similares a los

controles de tipo checkbox, pero presentan una diferencia
muy importante: son mutuamente excluyentes.

Los radiobutton se utilizan cuando el usuario solamente

puede escoger una opción entre las distintas opciones
relacionadas que se le presentan. Cada vez que se
selecciona una opción, automáticamente se deselecciona la
otra opción que estaba seleccionaba.

A continuación se muestra el código HTML de un radiobutton

Nos quedará de la siguiente manera:

24
 BOTÓN DE ENVÍO DE FORMULARIO

La mayoría de formularios dispone de un botón para enviar al

servidor los datos introducidos por el usuario. El valor del
atributo type para este control de formulario es submit. El
navegador se encarga de enviar automáticamente los datos
cuando el usuario pincha sobre este tipo de botón. El valor del
atributo value es el texto que muestra el botón. Si no se
establece el atributo value, el navegador muestra el texto
predefinido Enviar consulta.

A continuación se muestra el código HTML de un botón de

envío

Nos quedará de la siguiente manera:

25
 BOTÓN DE RESETEO DEL FORMULARIO

Se trata de un botón especial que borra todos los datos

introducidos por el usuario y devuelve el formulario a su
estado original:

A continuación se muestra el código HTML de un botón de

reseteo del formulario

Nos quedará de la siguiente manera:

26
 FICHEROS ADJUNTOS

Los formularios también permiten adjuntar archivos para

subirlos al servidor. Aunque desde el punto de vista de HTML
y del navegador no existe ninguna limitación sobre el número,
tipo o tamaño total de los archivos que se pueden adjuntar,
todos los servidores añaden restricciones por motivos de
seguridad

A continuación se muestra el código HTML de un botón de

archivo adjunto

27
 BOTON GUARDAR CAMBIOS

Algunos formularios complejos necesitan botones más

avanzados que los de enviar datos (type="submit") y resetear
el formulario (type="reset"). Por ese motivo, el estándar
HTML/XHTML define un botón de tipo genérico:

A continuación se muestra el código HTML de un botón de

guardar cambios

28
 FORMULARIOS AVANZADOS

Utilizando solamente las etiquetas <form> al Principio del

formulario e <input> es posible diseñar la mayoría de
formularios de las aplicaciones web. No obstante, HTML
define algunos elementos adicionales para mejorar la
estructura de los formularios creados.

A continuación se muestra el código HTML un formulario

estructurado y que hace uso de <fieldsedt> y <legend> para
agrupar los campos del formulario:

29
 Nos quedará de la siguiente manera:

30
 La etiqueta <fieldset> agrupa todos los controles de formulario
a los que encierra. El navegador muestra por defecto un
borde resaltado para cada agrupación. La etiqueta <legend>
se incluye dentro de cada etiqueta <fieldset> y establece el
título que muestra el navegador para cada agrupación de
elementos.

Por otra parte, todos los controles de formulario salvo los

botones presentan una carencia muy importante: no disponen
de la opción de establecer el título o texto que se muestra
junto al control. En el código HTML del ejemplo anterior, el
nombre de cada campo se incluye en forma de texto normal,
sin ninguna relación con el campo al que hace referencia.

OTROS ELEMENTOS DE FORMULARIO

31
 La etiqueta <input> permite crear diez tipos diferentes de
controles de formulario. Sin embargo, algunas aplicaciones
web utilizan otros elementos de formulario que no se pueden
crear con <input>. Las listas deplegables y las áreas de texto
disponen de sus propias etiquetas (<select> y <textarea>
respectivamente).

Las áreas de texto son útiles cuando se debe introducir una

gran cantidad de texto, ya que es mucho más cómodo de
introducir que en un campo de texto normal:

El código HTML del ejemplo anterior se muestra a

continuación:

32
 Los atributos más utilizados en las etiquetas <textarea> son
los que controlan su anchura y altura. La anchura del área de
texto se controla mediante el atributo cols, que indican las
columnas o número de caracteres que se podrán escribir
como máximo en cada fila. La altura del área de texto se
controla mediante rows, que indica directamente las filas d
texto que serán visibles

LISTAS DESPLEGABLES

Existen tres tipos de listas desplegables disponibles. El

primero es el de las listas más utilizadas que sólo muestran
un valor cada vez y sólo permiten seleccionar un valor. El
segundo tipo de lista es el que sólo permite seleccionar un
valor pero muestra varios a la vez. Por último, el tercer tipo de
lista desplegable es aquella que muestra varios valores y
permite realizar selecciones múltiples.

33
 El código HTML del ejemplo anterior se muestra a
continuación:

34
 Nos quedará de la siguiente manera:

SELECT

La etiqueta <select> define la lista y encierra todas las

opciones que muestra la lista. Cada una de las opciones de la
lista se define mediante una etiqueta <option>. El atributo
value de cada opción es obligatorio, ya que es el dato que se
envía al servidor cuando el usuario envía el formulario. Para
seleccionar por defecto una opción al mostrar la lista, se
añade el atributo selected a la opción deseada.

35
 Nos quedará de la siguiente manera:

36