El World Wide Web (WWW) es un sistema que contiene una cantidad de

informacin casi infinita. Pero esta informacin debe estar ordenada de alguna
forma de manera que sea posible encontrar lo que se busca. La unidad bsica
donde est almacenada esta informacin son las pginas Web. Estas pginas se
caracterizan por contener texto, imgenes, animaciones... e incluso sonido y
video.
Una de las caractersticas ms importantes de las pginas Web es que son
hipertexto. Esto quiere decir que las pginas no son elementos aislados, sino que
estn unidas a otras mediante los links o enlaces hipertexto. Gracias a estos
enlaces el navegante de internet puede pulsar sobre un texto (texto al que
llamaremos de ahora en adelante activo) de una pgina para navegar hasta otra
pgina. Ser cuestin del programador de la pgina inicial decidir que palabras o
frases sern activas y a donde nos conducir pulsar sobre ellas.
En algunos ambientes se discute que el World Wide Web ya no es un sistema
hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que
aunque en sus orgenes el WWW constaba nicamente de texto en la actualidad
es un sistema principalmente grfico y se puede hacer que las zonas activas sean,
no slo texto, sino imgenes, videos, botones,... en definitiva cualquier elemento
de una pgina. An as, el trmino original no ha sido reemplazado todava y por
tanto ser el empleado a lo largo de esta obra.
Figura 1.1. Aunque al principio el texto predominaba en el WWW, en la
actualidad las imgenes son mayora como podemos observar en una de las
principales webs del proyecto KDE.

1.1. Caractersticas del lenguaje HTML

Pero empecemos ya con lo que nos interesa. Cmo se hace una pgina Web?
Cuando los diseadores del WWW se hicieron esta pregunta decidieron que se
deban cumplir, entre otras, las siguientes caractersticas:
El Web tena que ser distribuido: La informacin repartida en pginas no
muy grandes enlazadas entre s.
El Web tena que ser hipertexto y deba ser fcil navegar por l.
Tena que ser compatible con todo tipo de ordenadores (PCs, Macintosh,
estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows,
MS-DOS, UNIX, MAC-OS,...).
Deba ser dinmico: el proceso de cambiar y actualizar la informacin
deba ser gil y rpido.
Estas caractersticas son las que marcaron el diseo de todos los elementos del
WWW incluida la programacin de pginas Web. Como respuesta a todos estos
requisitos se creo el lenguaje HTML (HiperText Markup Language), cuyas siglas
significan "lenguaje hipertexto de marcas".

Este lenguaje ser el encargado de convertir un inocente archivo de texto inicial

en una pgina web con diferentes tipos y tamaos de letra, con imgenes
impactantes, animaciones sorprendentes, formularios interactivos, etc.

1.2. Qu se necesita para crear una pgina web

Una de las caractersticas de este lenguaje ms importantes para el programador
es que no es necesario ningn programa especial para crear una pgina Web.
Gracias a ello se ha conseguido que se puedan crear pginas con cualquier
ordenador y sistema operativo. El cdigo HTML, como hemos adelantado en el
prrafo anterior, no es ms que texto y por tanto lo nico necesario para escribirlo
es un editor de texto como el que acompaan a todos los sistemas
operativos: edit en MS-DOS, block de notas en Windows,vien UNIX, etc. Por
supuesto estos no son los nicos editores de texto que pueden ser usados, sino
cualquier otro. Tambin se puede usar procesadores de texto, que son editores
con capacidades aadidas, compo pueden ser Microsoft Word o WordPerfect pero
hay que tener cuidado porque en ocasiones hacen traducciones automticas del
cdigo HTML que no siempre son deseadas. En estos dos ltimos casos, tambin
hay que tener en cuenta que deberemos guardar el archivo en modo texto.
Figura 1.2. Un editor de texto simple, como el block de notas de Windows, es
todo lo necesario para crear una pgina Web

Una vez hemos escrito el cdigo deberemos guardar el archivo (con formato de
texto) con la extensin .html ( o .htm en MS-DOS, Windows 3.1 o cualquier otro
sistema que slo acepte tres letras en la extensin. Los siguientes son nombres
vlidos de archivos que contengan cdigo HTML: index.html,
index.htm,principal.html, PRINCIPAL.htm, etc...

NOTA: Si el editor o procesador de textos usado para crear la pgina obliga a

usar la extensin .txt al guardar el archivo en modo texto, deberemos guardarlo
con esta extensin, por ejemplo como index.txt, y posteriormente cambiar el
nombre del archivo desde fuera del programa a index.html o index.htm . Para
ello usaremos el comando rename en MS-DOS; en Windows 3.1 lo haremos
mediante el administrador de archivos y en Windows 95 con el explorador. En
otros entornos, como Linux, es mas raro que se de esta situacin.
ATENCIN: El World Wide Web es un sistema que diferencia las maysculas de
las minsculas. Es un error comn llamar a un archivo index.html y luego
referirse a l como Index.html. Aunque en nuestro ordenador puede funcionar al
publicarlo seguramente no lo har. Por esta razn es una norma general usar
siempre minsculas para los nombres de los archivos html.
ltimamente han aparecido nuevas alternativas que facilitan la programacin de
pginas Web. Son los editores HTML. Podemos dividir estos editores en dos
grupos:
Asistentes: ayudan a crear el cdigo HTML e incluyen plantillas de
cdigo prefabricadas, por ejemplo HotDog (Win), HomeSite(Win),HTML
Editor (Mac), Quanta (Linux, KDE) o Bluefish, (Linux, GNOME).
Conversores: son programas con otra funcin que la de la programacin
Web pero que permiten convertir a HTML. Son ejemplos de
conversores Microsoft Word ,Quark XPress y PageMaker.
Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que
obtienes): estos editores permiten crear pginas web sin escribir cdigo
HTML como si se tratase de un programa de dibujo por ordenador.
Algunos ejemplos de este tipo de editores son Macromedia
Dreamweaver, HotMetal o Microsoft Frontpage.
Figura 1.3. Algunos editores WYSIWYG permiten, adems, modificar el
cdigo HTML directamente.

1.3. Algunas razones para usar HTML

Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas
e inconvenientes, pero la experiencia demuestra que conocer el lenguaje HTML
ofrece bastantes ventajas:
Seremos capaces de aprovechar todas las caractersticas de este lenguaje,
incluso las ms nuevas.
Aunque se use inicialmente un editor WYSWYG tendremos los
conocimientos suficientes para modificar posteriormente el cdigo que
ste ha creado. As se pueden corregir errores o incluir etiquetas no
soportadas por el editor.

 No dependeremos de la disponibilidad de una herramienta concreta para

poder crear pginas web. Con un simple editor de textos ser suficiente.
El principal problema de usar editores conversores y WYSIWYG es la necesidad
de trabajar con dos archivos-fuentes por separado, por un lado el archivo del
editor y por otro el archivo del cdigo HTML una vez generado, lo que nos
complica la vida a la hora de realizar cambios en nuestro Web. Sin embargo su
utilidad es innegable y su combinacin con un buen conocimiento del lenguaje
HTML nos convertir en unos grandes programadores de pginas Web capaces
de realizar creaciones impactantes visualmente y de gran calidad tcnica.

1.4. HTML es un lenguaje descriptivo

Probablemente el lector ha usado alguna vez un procesador de texto
(Abiword, Microsoft Word o KWord) o un programa de descripcin de pginas
(QuarkXPress). Con este tipo de aplicaciones el usuario tiene un control total
sobre los elementos del documento: se le puede decir al programa "pon este texto
con este tamao", "sitalo a 1 cm. del borde", "usa este sangrado para los
prrafos", etc... Con HTML el programador no tiene este tipo de control sobre los
elementos que incluir en su pgina. El objetivo de este lenguaje ser
simplemente describir cmo es una pgina de manera que examinando esa
descripcin el navegador del usuario final sea capaz de mostrarlo de la mejor
manera posible. Con HTML podremos indicarle al navegador que este es un
titular, aqu comienza un prrafo, estos son elementos de una lista, etc.
posteriormente el navegador decidir como mostrar esos elementos.
Figura 1.4. Los navegadores en modo texto como Lynx tambin pueden
mostrar pginas Web gracias al carcter descriptivo de HTML.

-Por qu funciona as? En un principio esta caracterstica del HTML puede

resultar molesta para el creador de la pgina, que no puede saber como ser vista
su pgina ms que de una forma aproximada. Sin embargo es fundamental para
conseguir que el World Wide Web pueda ser navegado con cualquier tipo de
ordenador (dicho con otras palabras, que el WWW sea multiplataforma).
Debemos tener en cuenta que no todos los sistemas operativos son grficos, que
incluso usando un mismo sistema operativo existen diferentes resoluciones de
pantalla, ... Por esta razn el lenguaje necesario para crear pginas debe ser
descriptivo y como consecuencia tras crear una pgina el programador debe ver
como es mostrada con varios navegadores distintos como Netscape
Navigator o Microsoft Internet Explorer incluyendo algn navegador de texto
como Lynx.
Pero una consecuencia ms importante an de esta caracterstica, es que ha
permitido que aparezcan navegadores vocales, que leen las pginas en vez de
mostrarlas. Gracias a ello personas ciegas tambin han podido disfrutar del
WWW. Es ms, esta misma tecnologa esta siendo usada para los nuevos
navegadores embarcados en coches que leen la pgina al conductor para que no
se distraiga.
NOTA: Una vez creada una pgina es recomendable probar nuestra pgina, no
slo con varios navegadores, sino tambin con varias resoluciones de pantalla
distintas como por ejemplo: 640x480, 800x600 y 1024x768. Si existe la
posibilidad de probarlo adems con un navegador vocal, mucho mejor an.
Un buen ejemplo de este carcter descriptivo es la definicin de titulares, tambin
llamados encabezados, en HTML. Vamos a adelantarnos un poco en esta

introduccin para mostrar este ejemplo, en l se muestra como poner el titular de

una pgina:
<h1>Bienvenido a la pgina de La Super Editorial</h1>

Con este cdigo estamos describiendo el texto Bienvenido a la pgina de La

Super Editorial como el texto de mxima importancia en nuestra pgina, es el
titular. En los navegadores ms usados como elNetscape Navigator o el Microsoft
Internet Explorer este titular ser mostrado como un texto en negrita y de tamao
grande (el tamao ms grande posible). Sin embargo repetimos una vez ms que
existen navegadores como pueden ser Lynx o Emacs-W3 que son bastante usados
por la comunidad acadmica y universitaria que slo pueden mostrar texto y no
pueden variar el tamao de la letra. Por esta razn la etiqueta <h1> no dice que el
texto que encierra debe ser de tal tamao o si debe ser negrita o no. Esta etiqueta
slo le dice que este texto es el ms importante de la pgina, el titular. Sabiendo
esto el navegador que funcione en modo texto puede resaltar dicho titular con los
medios de que dispone, como por ejemplo ponindolo en maysculas o usando
distintos sangrados.
Tambin podemos encontrar ventajas de la descripcin mirando al futuro.
Imaginemos que la informtica evoluciona hasta tal punto que los monitores de
dentro de unos aos pueden mostrar objetos en tres dimensiones. Sera muy
interesante que el titular de nuestra pgina fuese en 3-D de manera que resaltase
lo mximo posible. Pues bien, si lo hemos definido como cabecera principal (y
no como letra de tamao 20 puntos y en negrita, por ejemplo) el navegador sabe
que queremos que ese texto sea el ms importante y puede actuar de manera
inteligente ponindolo automticamente en tres dimensiones, sin que nosotros
hayamos cambiado una sola lnea de nuestro cdigo! Parece interesante no?
Una vez a quedado claro cual es el espritu de HTML, hay que decir que
ltimamente se han introducido mtodos para conseguir un mayor control sobre
las pginas. Estos mtodos permiten controlar aspectos como el tamao de la
letra la disposicin (aproximada) de imgenes y texto de manera que se facilita la
labor del programador. Pero hay que tener siempre en mente que siempre habr
ligeras diferencias entre como vern las pginas unos usuarios u otros y no
debemos pretender poder controlar la presentacin y diseo de nuestra pgina
hasta el mnimo detalle.

1.5. Las bases de HTML

Una vez repasadas unas nociones bsicas de HTML y de la programacin de

pginas Web en general entraremos de lleno en la programacin con este
lenguaje. Pronto nos daremos cuenta de la sencillez de este lenguaje lo que le
convierte en un lenguaje muy fcil de aprender y que nos permitir crear pginas
con mayor facilidad an.
Las rdenes de este lenguaje estarn formadas por unos comandos llamados
etiquetas que pueden tener o bien la siguiente estructura:
<NOMBRE_ETIQUETA>

O bien esta otra:

<NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>

Como vemos, la primera estructura est formada por una nica instruccin y la
segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final,
con texto entre ambas.
Por ejemplo, para indicarle al navegador que queremos que pinte una lnea
horizontal debemos escribir:
<hr>

As de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los

smbolos menor que (<) y mayor que (>), todas las instrucciones de HTML
deben ir encerradas entre estos dos smbolos.
Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas rdenes
tienen en ocasiones parmetros. Por ejemplo la etiqueta <hr> tal y como lo hemos
hecho anteriormente dara lugar a la lnea que vemos en la figura 1.5, es decir le
dice al navegador que dibuje una lnea horizontal en la pantalla. Esta lnea tiene
un grosor predeterminado y un ancho variable en funcin del tamao de la
ventana del navegador.
Figura 1.5. Uso bsico de una etiqueta HTML sin ningn tipo de
parmetros. Ejemplo usando la etiqueta <hr> para crear una lnea
horizontal.

Sin embargo hay muchas formas de pintar una lnea y sera deseable poder elegir
detalles tales como la anchura y el grosor que va a tener dicha lnea. Para
especificar este tipo de detalles se crearon los atributos de las etiquetas. Este
nuevo elemento se introduce en una etiqueta de la siguiente manera:
<etiqueta atributo="valor">

Es decir, en primer lugar ponemos el nombre de la etiqueta, despus el nombre

del atributo seguido por un signo igual y posteriormente el valor que queramos
darle a ese atributo encerrado entre comillas una etiqueta puede tener tantos
atributos como se deseen y en ocasiones son necesarios para que la etiqueta tenga
algn significado.
En nuestro ejemplo de la lnea horizontal existe un atributo llamado SIZE, que
significa tamao en ingls, que permite controlar el grosor de la lnea que ser
dibujada en pantalla. Veamos un ejemplo, en la figura 1.6 podemos ver la lnea
horizontal con diferentes grosores.
Figura 1.6. Las etiquetas tienen atributos para cambiar aspectos del efecto
que producen. En este ejemplo vemos como se puede cambiar el grosor de
una lnea con el atributo SIZE.

El valor que toma el atributo size determina el nmero de puntos de pantalla o

pixeles que debe ocupar, en grosor, la lnea. En posteriores captulos
estudiaremos en detalle la etiqueta <hr> y todos sus atributos.
En la figura 1.6 vemos que el valor numrico que le damos al atributo size no va
entrecomillado, por ejemplo en <hr size=5>. En HTML no es necesario
entrecomillar los valores de los atributos cuando estn formados nicamente por
nmeros [0-9], letras [a-z, A-Z], guiones y puntos. En todo caso es muy
recomendable incluir las comillas siempre. De esta forma no tenemos que
preocuparnos de cuando ponerlas y cuando no y a la vez cumplimos el nuevo
estndar XHTML. Para los curiosos adelantaremos que XHTML es idntico a
HTML pero con algunas restricciones adicionales del mundo de XML.
Antes de empezar con el cdigo HTML bsico conviene hacer saber al lector que
aunque en todos los ejemplos usados hasta ahora las etiquetas usadas estaban
escritas en maysculas en realidad es indiferente el uso de estas o de minsculas.
Sin embargo las maysculas son de uso comn para que sea ms fcil
distinguirlas del texto y por tanto seguiremos usando este convenio a lo largo del
curso.
En los ejemplos tambin usaremos distinto sangrado (alineacin de los prrafos)
para los diferentes elementos del cdigo para mostrar los niveles de anidamiento.
Este sangrado no es necesario y el lector puede optar por ignorarlo si decide
copiar los ejemplos para verlos en su navegador, sin embargo facilita la lectura

del cdigo y no afecta al modo en que los objetos de nuestra pgina sern
mostrados.