Capítulo 1.
1.1. ¿Qué es HTML?
Definiéndolo de forma sencilla, "HTML es lo que se utiliza para crear
todas las páginas web de
Internet". Más concretamente, HTML es el lenguaje con el que se
"escriben" la mayoría de páginas
web.
Los diseñadores utilizan el lenguaje HTML para crear sus páginas web,
los programas que
utilizan los diseñadores generan páginas escritas en HTML y los
navegadores que utilizamos los
usuarios muestran las páginas web después de leer su contenido HTML.
Aunque HTML es un lenguaje que utilizan los ordenadores y los programas
de diseño, es muy
fácil de aprender y escribir por parte de las personas. En realidad,
HTML son las siglas de
HyperText Markup Language y más adelante se verá el significado de cada
una de estas palabras.
El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas
normas define un
organismo sin ánimo de lucro llamado World Wide Web Consortium
(http://www.w3.org/) ,
más conocido como W3C. Como se trata de un estándar reconocido por
todas las empresas
relacionadas con el mundo de Internet, una misma página HTML se
visualiza de forma muy
similar en cualquier navegador de cualquier sistema operativo.
El propio W3C define el lenguaje HTML como "un lenguaje reconocido
universalmente y que
permite publicar información de forma global". Desde su creación, el
lenguaje HTML ha pasado de
ser un lenguaje utilizado exclusivamente para crear documentos
electrónicos a ser un lenguaje
que se utiliza en muchas aplicaciones electrónicas como buscadores,
tiendas online y banca
electrónica.
1.2. Breve historia de HTML
La historia completa de HTML es tan interesante como larga, por lo que
a continuación se
muestra su historia resumida a partir de la información que se puede
encontrar en la Wikipedia.
El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee,
trabajador del CERN
(http://www.cern.ch/) (Organización Europea para la Investigación
Nuclear) propuso un nuevo
sistema de "hipertexto" para compartir documentos.
Los sistemas de "hipertexto" habían sido desarrollados años antes. En
el ámbito de la
informática, el "hipertexto" permitía que los usuarios accedieran a la
información relacionada
con los documentos electrónicos que estaban visualizando. De cierta
manera, los primitivos
sistemas de "hipertexto" podrían asimilarse a los enlaces de las
páginas web actuales.
Tras finalizar el desarrollo de su sistema de "hipertexto", Tim
Berners-Lee lo presentó a una
convocatoria organizada para desarrollar un sistema de "hipertexto"
para Internet. Después de
unir sus fuerzas con el ingeniero de sistemas Robert Cailliau,
presentaron la propuesta
ganadora llamada WorldWideWeb (W3).
Introducción a XHTML Capítulo 1. Introducción
www.librosweb.es 5
El primer documento formal con la descripción de HTML se publicó en
1991 bajo el nombre
"HTML Tags"
(http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/
Tags.html) (Etiquetas HTML) y todavía hoy puede ser consultado online a
modo de reliquia
informática.
La primera propuesta oficial para convertir HTML en un estándar se
realizó en 1993 por parte
del organismo IETF (http://www.ietf.org/) (Internet Engineering Task
Force). Aunque se
consiguieron avances significativos (en esta época se definieron las
etiquetas para imágenes,
tablas y formularios) ninguna de las dos propuestas de estándar,
llamadas HTML y HTML+
consiguieron convertirse en estándar oficial.
En 1995, el organismo IETF organiza un grupo de trabajo de HTML y
consigue publicar, el 22 de
septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su
nombre, HTML 2.0 es el
primer estándar oficial de HTML.
A partir de 1996, los estándares de HTML los publica otro organismo de
estandarización
llamado W3C (http://www.w3.org/) (World Wide Web Consortium). La
versión HTML 3.2 se
publicó el 14 de Enero de 1997 y es la primera recomendación de HTML
publicada por el W3C.
Esta revisión incorpora los últimos avances de las páginas web
desarrolladas hasta 1996, como
applets de Java y texto que fluye alrededor de las imágenes.
HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión
corregida de la publicación
original del 18 de Diciembre de 1997) y supone un gran salto desde las
versiones anteriores.
Entre sus novedades más destacadas se encuentran las hojas de estilos
CSS, la posibilidad de
incluir pequeños programas o scripts en las páginas web, mejora de la
accesibilidad de las
páginas diseñadas, tablas complejas y mejoras en los formularios.
La última especificación oficial de HTML se publicó el 24 de diciembre
de 1999 y se denomina
HTML 4.01. Se trata de una revisión y actualización de la versión HTML
4.0, por lo que no incluye
novedades significativas.
Desde la publicación de HTML 4.01, la actividad de estandarización de
HTML se detuvo y el W3C
se centró en el desarrollo del estándar XHTML. Por este motivo, en el
año 2004, las empresas
Apple, Mozilla y Opera mostraron su preocupación por la falta de
interés del W3C en HTML y
decidieron organizarse en una nueva asociación llamada WHATWG
(http://www.whatwg.org/)
(Web Hypertext Application Technology Working Group).
La actividad actual del WHATWG se centra en el futuro estándar HTML 5,
cuyo primer borrador
oficial (http://www.w3.org/TR/html5/) se publicó el 22 de enero de
2008. Debido a la fuerza de
las empresas que forman el grupo WHATWG y a la publicación de los
borradores de HTML 5.0,
en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de
HTML
(http://www.w3.org/2007/03/html-pressrelease) .
De forma paralela a su actividad con HTML, W3C ha continuado con la
estandarización de
XHTML, una versión avanzada de HTML y basada en XML. La primera versión
de XHTML se
denomina XHTML 1.0 y se publicó el 26 de Enero de 2000 (y
posteriormente se revisó el 1 de
Agosto de 2002).
Capítulo 2.
El proceso de transformación de caracteres en secuencias de números se
denomina
codificación de caracteres y cada una de las tablas que se han definido
para realizar la
transformación se conocen con el nombre de páginas de código. Una de
las codificaciones más
conocidas (y una de las primeras que se publicaron) es la codificación
ASCII. La importancia de
las codificaciones en HTML se verá más adelante.
Una vez resuelto el problema de almacenar el texto simple, se presenta
el reto de almacenar los
contenidos de texto con formato. En otras palabras, ¿cómo se almacena
un texto en negrita? ¿y
un texto de color rojo? ¿y otro texto azul, en negrita y subrayado?
Utilizar una tabla de conversión similar a las que se utilizan para
textos sin formato no es
posible, ya que existen infinitos posibles estilos para aplicar al
texto. Una solución técnicamente
viable consiste en almacenar la información sobre el formato del texto
en una zona especial
reservada dentro del propio archivo. En esta zona se podría indicar
dónde comienza y dónde
termina cada formato.
No obstante, la solución que realmente se emplea para guardar la
información con formato es
mucho más sencilla: el archivo electrónico almacena tanto los
contenidos como la información
sobre el formato de esos contenidos. Si por ejemplo se quiere dividir
el texto en párrafos y se
desea dar especial importancia a algunas palabras, se podría indicar de
la siguiente manera:
Introducción a XHTML Capítulo 2. Características básicas
www.librosweb.es 9
<parrafo>
Contenido de texto con <importante>algunas
palabras</importante> resaltadas de forma
especial.
</parrafo>
El principio de un párrafo se indica mediante la palabra
<parrafo> y el final de un párrafo se
indica mediante la palabra </parrafo>. De la misma manera, para
asignar más importancia a
ciertas palabras del texto, se encierran entre <importante> y
</importante>.
El proceso de indicar las diferentes partes que componen la información
se denomina marcar
(markup en inglés). Cada una de las palabras que se emplean para marcar
el inicio y el final de
una sección se denominan etiquetas.
Aunque existen algunas excepciones, en general las etiquetas se indican
por pares y se forman
de la siguiente manera:
▪ Etiqueta de apertura: carácter <, seguido del nombre de la
etiqueta (sin espacios en
blanco) y terminado con el carácter >
▪ Etiqueta de cierre: carácter <, seguido del carácter /, seguido
del nombre de la etiqueta
(sin espacios en blanco) y terminado con el carácter >
Así, la estructura típica de las etiquetas HTML es:
<nombre_etiqueta> ... </nombre_etiqueta>
HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado)
y las páginas web
habituales están formadas por cientos o miles de pares de etiquetas. De
hecho, las letras "ML" de
la sigla HTML significan "markup language", que es como se denominan en
inglés a los lenguajes
de marcado. Además de HTML, existen muchos otros lenguajes de etiquetas
como XML, SGML,
DocBook y MathML.
La principal ventaja de los lenguajes de etiquetas es que son muy
sencillos de leer y escribir por
parte de las personas y de los sistemas electrónicos. La principal
desventaja es que pueden
aumentar mucho el tamaño del documento, por lo que en general se
utilizan etiquetas con
nombres muy cortos.
2.2. El primer documento HTML
Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La
cabecera incluye
información sobre la propia página, como por ejemplo su título y su
idioma. El cuerpo de la
página incluye todos sus contenidos, como párrafos de texto e imágenes.
Figura 2.2. Esquema de las partes que forman un documento HTML
Capítulo 2. Características básicas Introducción a XHTML
10 www.librosweb.es
El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve
en su pantalla y la cabecera
(llamada head en inglés) contiene todo lo que no se ve (con la única
excepción del título de la
página, que los navegadores muestran como título de sus ventanas).
Capítulo 3.
La mayor parte del contenido de las páginas HTML habituales está
formado por texto, llegando a
ser más del 90% del código de la página. Por este motivo, es muy
importante conocer los
elementos y etiquetas que define HTML para el manejo del texto.
El lenguaje HTML incorpora al tratamiento del texto muchas de las ideas
y normas establecidas
en otros entornos de publicación de contenidos. De esta forma, HTML
define etiquetas para
estructurar el contenido en secciones y párrafos y define otras
etiquetas para marcar
elementos importantes dentro del texto.
La tarea inicial del editor de contenidos HTML consiste en estructurar
el texto original
definiendo sus párrafos, titulares y títulos de sección, como se
muestra en la siguiente imagen:
Figura 3.1. Resultado de estructurar un texto sencillo
El proceso de estructurar un texto simple consiste en indicar las
diferentes zonas o secciones
que componen el texto. De esta forma, los textos estructurados utilizan
etiquetas para delimitar
cada párrafo y títulos de sección para delimitar cada una de las
secciones que forman el texto.
Una vez definida la estructura básica de los contenidos de la página,
el siguiente paso consiste en
marcar los diferentes elementos dentro del propio texto: definiciones,
abreviaturas, textos
importantes, textos modificados, citas a otras referencias, etc.
Introducción a XHTML Capítulo 3. Texto
www.librosweb.es 21
Figura 3.2. Resultado de marcar un texto sencillo
El anterior ejemplo muestra la transformación de un párrafo con un
texto simple en un párrafo
cuyo texto contiene elementos marcados de forma especial. Así, algunas
palabras del texto se
muestran en negrita porque se consideran importantes; otras palabras
aparecen en cursiva, ya
que se han marcado como destacadas e incluso una frase aparece tabulada
y entre comillas,
indicando que es una cita textual de otro contenido.
En las secciones siguientes se muestran todas las etiquetas que define
HTML para estructurar y
marcar el texto. Además, se hace una mención especial al tratamiento
que hace HTML de los
espacios en blanco y las nuevas líneas.
3.1. Estructurar
La forma más sencilla de estructurar un texto consiste en separarlo por
párrafos. Además, HTML
permite incluir títulos que delimitan cada una de las secciones.
3.1.1. Párrafos
Una de las etiquetas más utilizadas de HTML es la etiqueta <p>,
que permite definir los párrafos
que forman el texto de una página. Para delimitar el texto de un
párrafo, se encierra ese texto
con la etiqueta <p>, como muestra el siguiente ejemplo:
<html>
<head>
<title>Ejemplo de texto estructurado con párrafos</title>
</head>
<body>
<p>Este es el texto que forma el primer párrafo de la página.
Los párrafos pueden ocupar varias líneas y el navegador se encarga
de ajustar su longitud al tamaño de la ventana.</p>
<p>El segundo párrafo de la página también se define encerrando
Capítulo 3. Texto Introducción a XHTML
22 www.librosweb.es
su texto con la etiqueta p. El navegador también se encarga de
separar automáticamente cada párrafo.</p>
</body>
</html>
El ejemplo anterior se visualiza de la siguiente manera en cualquier
navegador:
Figura 3.3. Ejemplo de texto HTML estructurado con párrafos
La siguiente tabla recoge la definición formal de la etiqueta <p>:
<p> Párrafos
Atributos comunes básicos, i18n y eventos
Atributos
específicos
-
Tipo de elemento Bloque
Descripción Delimita el contenido de un párrafo de texto
Los párrafos creados con HTML son elementos de bloque, por lo que
siempre ocupan toda la
anchura de la ventana del navegador. Además, no tienen atributos
específicos, pero sí que se les
pueden asignar los atributos comunes de HTML básicos, de
internacionalización y de eventos.
3.1.2. Secciones
Las páginas HTML habituales suelen tener una estructura más compleja
que la que se puede
crear solamente mediante párrafos. De hecho, es habitual que las
páginas se dividan en
diferentes secciones jerárquicas.
Introducción a XHTML Capítulo 3. Texto
www.librosweb.es 23
Los títulos de sección se utilizan para delimitar el comienzo de cada
sección de la página. HTML
permite crear secciones de hasta seis niveles de importancia. De esta
forma, aunque una página
puede definir cualquier número de secciones, sólo puede incluir seis
niveles jerárquicos.
Las etiquetas que definen los títulos de sección son <h1>,
<h2>, <h3>, <h4>, <h5> y <h6>. La
etiqueta <h1> es la de mayor importancia y por tanto se utiliza
para definir los titulares de la
página. La importancia del resto de etiquetas es descendiente, de forma
que la etiqueta <h6> es
la que se utiliza para delimitar las secciones menos importantes de la
página.
A continuación se muestra la definición formal de la etiqueta
<h1>, siendo idéntica la definición
del resto de etiquetas referidas a los títulos de sección:
Capítulo 4.
El lenguaje de marcado HTML se definió teniendo en cuenta algunas de
las características que
existían en ese momento para la publicación digital de contenidos.
Entre los conceptos utilizados
en su creación, se encuentra el mecanismo de "hipertexto".
De hecho, las letras "HT" de la sigla HTML significan "hipertexto"
(hypertext en inglés), por lo que
el significado completo de HTML podría traducirse como "lenguaje de
marcado para hipertexto".
La incorporación del hipertexto fue una de las claves del éxito del
lenguaje HTML, ya que
permitió crear documentos interactivos que proporcionan información
adicional cuando se
solicita. El elemento principal del hipertexto es el "hiperenlace",
también llamado "enlace web" o
simplemente "enlace".
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 llaman "anchors" en inglés,
que se puede traducir
literalmente como "anclas".
4.1. 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
En primer lugar, las URL permiten que cada página HTML publicada en
Internet tenga un
nombre único que permita diferenciarla de las demás. De esta forma es
posible crear enlaces que
apunten de forma inequívoca a una determinada página.
Si se accede a la página principal de Google, la dirección que muestra
el navegador es:
http://www.google.com
La cadena de texto http://www.google.com es la URL completa de la
página principal de Google.
La URL de las páginas es imprescindible para crear los enlaces, ya que
permite distinguir una
página de otra.
Capítulo 4. Enlaces Introducción a XHTML
48 www.librosweb.es
El segundo objetivo de las URL es el de permitir la localización
eficiente de cada recurso de
Internet. Para ello es necesario comprender las diferentes partes que
forman las URL. Una URL
sencilla siempre está formada por las mismas tres partes. Si por
ejemplo se considera la
siguiente URL:
http://www.librosweb.es/xhtml/capitulo4.html
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.
No obstante, existen
URL complejas formadas por más partes.
http://www.alistapart.com/comments/webstandards2008?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 #
Como las URL utilizan los caracteres :, =, & y / para separar sus
partes, estos caracteres están
reservados y no se pueden utilizar libremente. Además, algunos
caracteres no están reservados
pero pueden ser problemáticos si se utilizan en la propia URL.
Si es necesario incluir estos caracteres reservados y especiales en una
URL, se sustituyen por
combinaciones de caracteres seguros. Esta sustitución se denomina
codificación de caracteres y
el servidor realiza el proceso inverso (decodificación) cuando le llega
una URL con los caracteres
codificados.