HTML (HyperText Markup Language, Lenguaje de marcas de hipertexto)

Capítulo 1

HTML

INTRODUCCIÓN

HTML (HyperText Markup Language, Lenguaje de marcas de hipertexto) es la lingua mater de la web. Fue el lenguaje pionero para la creación de páginas web estáticas, páginas que siempre tienen los mismos contenidos salvo que se modifique el archivo. Aunque el mundo de la World Wide Web ha evolucionado mucho, incorporando nuevos lenguajes y tecnologías, HTML sigue jugando un papel fundamental en él.

Es un lenguaje etiquetado. Un documento HTML no es más que un fichero de texto en el que la estructura y el formato son aplicados con etiquetas.

El lenguaje HTML fue ideado en 1990 por Tim Berners-Lee en el CERN (Suiza). Originalmente, no iba a ser más que un lenguaje para facilitar el intercambio de datos científicos. El lenguaje HTML, y la WWW, se hicieron muy populares. En 1994 se creó el World Wide Web Consortium (W3C), con el propósito de definir los estándares de la WWW (incluido el HTML).

En 1995 Internet se abrió por completo al público general. Muchas compañías empezaron a desarrollar navegadores, implementando el estándar HTML de maneras distintas. El lenguaje se “desestandarizó”, a pesar de los esfuerzos del W3C. Además, HTML empezó a utilizarse para publicar contenidos multimedia, a pesar de que el lenguaje no fue diseñado para eso.

Muchos documentos HTML se ven de manera distinta según el navegador que se utilice.

A finales de los 90, el lenguaje alcanzó una masa crítica. Ya era imposible ampliarlo más.

La solución que se adoptó fue empezar ‘desde cero’ y resolver todos los problemas del HTML de golpe.

Así surge XHTML (Extensible HyperText Language). Es la reformulación del HTML en XML (XML + HTML = XHTML)

HTML es un lenguaje formulado en SGML, un lenguaje de etiquetas muy complicado. XML es mucho más ligero que SGML y, por ello, más fácil de implementar. Eventualmente sustituirá al HTML. Es un lenguaje mucho más sólido y estable que HTML.

Su Sintaxis más estricta, y es menos ambiguo. Otra característica es que es fácilmente expansible: XHTML Modules. Sintácticamente es muy parecido al HTML. Solo hay unas pequeñas diferencias.

1.1 EDITORES DE HTML

La herramienta principal en el desarrollo de páginas web es el editor que se usa para escribir el código. Los editores pueden ser de dos tipos dependiendo de la funcionalidad visual que ofrezcan. Por un lado, están los editores puros que muestran el código tal cual es, con la consiguiente dificultad para imaginar la página que resulta de dicho código conforme se va elaborando la misma. Un ejemplo de este tipo de programas podría ser el Bloc de notas de Windows. Por otro lado, se encuentran los llamados programas WYSIWYG, que ofrecen la enorme ventaja de permitir al usuario saber en todo momento cómo le está quedando la página ya que muestran el diseño de la misma. Ejemplos de este tipo de programas son Dreamweaver , Nvu, UltraEdit. Este último lo puedes descargar de www.ultraedit.com.

1.2 NAVEGADORES

Un navegador web es un programa que interpreta el código HTML de una página, reconstruyendo a partir de dicho código la imagen de la web que recibe el usuario. La reconstrucción de una página puede variar dependiendo del navegador que se utilice para visualizarla. Por ello, es conveniente, cuando se programa una página web, comprobar que se visualiza correctamente en varios navegadores distintos, especialmente en los más extendidos: Internet Explorer, Opera y Firefox.

Que una página no se vea bien en un navegador, no quiere decir que su código HTML esté redactado de forma incorrecta. Para evitar cualquier duda al respecto, merece la pena “validar” el código HTML a través del W3C (World Wide Web Consortium). Dicha organización pone a disposición de los desarrolladores un servicio de validación http://validator.w3.org que permite comprobar si una página cumple con el estándar HTML, asegurando así una mayor compatibilidad con los navegadores web (los cuales suelen atenerse a dicho código).

1.3 LAS ETIQUETAS HTML

HTML (HyperText Markup Language, Lenguaje de marcas de hipertexto ) no es un lenguaje de programación, sino un conjunto de reglas de cómo se debe visualizar un documento. Es un subconjunto derivado del SGML (Standard Generalized Markup Language), y lo único que contiene es un conjunto de etiquetas que indican cuándo el navegador debe visualizar un texto en negrita, un subrayado, etc. En principio, este es el comportamiento de cualquier programa de procesamiento de texto, aunque en el caso de HTML es más “visible” ya que el código se puede ver fácilmente.

Es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto estructurado en que se incluyen hiperenlaces (hyperlinks) que conducen a otros documentos, objetos multimedia (gráficos, sonidos, etc.) u otros elementos de información relacionados. Con el hipertexto lo que se hace realmente es especificar tanto la estructura lógica del contenido (títulos, párrafos, listas, definiciones, citas, etc.) como los diferentes efectos que se quieren dar a dicho contenido (se especifican los lugares del documento donde se ha de poner cursiva, negrita o insertar un gráfico determinado). Esta información es interpretada por el navegador web o browser, el cual se encargará de reproducir la página web tal y como la puede ver el usuario.

Se dice también que el HTML es un lenguaje de marcas o etiquetas porque las instrucciones que permiten estructurar los contenidos de las páginas y darles estilos o formatos son porciones de texto diferenciadas del resto de elementos. Es decir, dichas instrucciones en forma de etiquetas marcan los elementos del documento. Estos son:

• Estructura lógica del documento: Las etiquetas diferencian los párrafos de texto, establecen los títulos, etc. En general, determinan todos los elementos que forman parte de las estructura del documento.

• Diferenciación del texto mediante estilos: Las etiquetas permiten añadir al texto y a los elementos de la página diferentes estilos y formatos, diferenciando por ejemplo, si una palabra debe ir en cursiva o en negrita.

• Incrustación de información o contenidos externos: Las etiquetas permiten definir hiperenlaces, los cuales pueden servir para acceder a contenidos alojados en otras páginas o sitios web.

• Insercción de elementos multimedia o imágenes: Hay etiquetas o marcas especiales que permiten insertar imágenes, vídeos, etc., de forma rápida y sencilla.

Esto quiere decir que mediante HTML es posible definir la estructura de un documento, los estilos de sus elementos, incorporar elementos gráficos o multimedia e incluir enlaces a otras páginas o sitios web. Aunque, en la actualidad se prefiere definir los estilos de los elementos mediante el lenguaje CSS, esto siempre será posible en HTML.

Las etiquetas, que siempre deben comenzar por el carácter “<” y finalizar por el carácter “>”. Estas etiquetas, dependiendo del contenido, son las que indican el formato del texto. Casi todas las etiquetas disponibles se deben utilizar por pares: una que indica cuándo debe comenzar el formato solicitado y otra que indica cuándo debe terminar. Normalmente, la etiqueta de finalización es la misma que la de inicio, pero precedida por el carácter “/”. Así, el comienzo de un documento HTML se indica mediante la etiqueta <Html> y el final mediante </Html>.

El HTML no diferencia las minúsculas de las mayúsculas, por lo que es indiferente la utilización de las primeras, las segundas o una mezcla de ambas, siempre recordando que un documento escrito completamente en mayúsculas, en general, resulta mucho más difícil de leer que otro que las utiliza de una forma más racional.

1.4 ESTRUCTURA DE UN DOCUMENTO HTML

Todo documento escrito en HTML debe tener una estructura común que salvo en casos muy específicos se compone de un conjunto mínimo de etiquetas que describen las secciones de dicho documento. El documento se compone de una cabecera y un cuerpo. Dentro de la cabecera se debe especificar un título para el documento, con lo que las etiquetas básicas serán las que indican que se trata de un documento html, las de cabecera, título y cuerpo. Así un documento de estas características presenta el siguiente aspecto:

<HTML>

<HEAD>

<TITLE> Mi primera página con html </TITLE>

</HEAD>

<BODY>

Este sería el texto del documento

</BODY>

</HTML>

El navegador que interpretará el documento no va a diferenciar dónde se sitúan las etiquetas, ignorará los espacios en blanco que haya entre etiquetas. El final del título (</TITLE>) está indicado en la misma línea que la etiqueta del principio de título (<TITLE>), mientras que el final de la cabecera (</HEAD>) aparece en una línea diferente.

El navegador también va a ignorar los espacios en blanco que acompañan al texto que aparecerá en la página, por lo que para introducir el sangrado en un texto no se pueden “incluir espacios en blanco”.

Si no se utilizan propiedades del HTML dinámico, la representación del texto es secuencial, es decir, aparecerá antes, en la página, el texto que hayamos introducido previamente en el código.

1.5 FORMATO DE TEXTO

...