Introducción al lenguaje HTML

El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Pero esta
información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad
básica donde está almacenada esta información son las páginas Web. Estas páginas se caracterizan por contener
texto, imágenes, animaciones... e incluso sonido y video.
Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere decir que las
páginas no son elementos aislados, sino que están 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 página para navegar hasta otra página. Será cuestión del programador de la página inicial decidir
que palabras o frases serán 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 orígenes el WWW constaba únicamente de texto en la
actualidad es un sistema principalmente gráfico y se puede hacer que las zonas activas sean, no sólo texto, sino
imágenes, videos, botones,... en definitiva cualquier elemento de una página. Aún así, el término original no ha
sido reemplazado todavía y por tanto será el empleado a lo largo de esta obra.

Características del lenguaje HTML
Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web? Cuando los diseñadores del WWW
se hicieron esta pregunta decidieron que se debían cumplir, entre otras, las siguientes características:
• El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí.
• El Web tenía que ser hipertexto y debía ser fácil navegar por él.
• Tenía 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,...).
• Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.

Estas características son las que marcaron el diseño de todos los elementos delWWWincluida la programación de
páginas 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 página web con diferentes
tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.

Qué se necesita para crear una página web
Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún
programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con
cualquier ordenador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no es
más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos
los sistemas operativos: edit™ en MS-DOS, block de notas enWindows,vi™en UNIX, etc. Por supuesto estos no
son los únicos editores de texto que pueden ser usados, sino cualquier otro. También se puede usar procesadores
de texto, que son editores con capacidades añadidas, compo pueden ser Microsoft Word™ o WordPerfect™ pero
hay que tener cuidado porque en ocasiones hacen traducciones automáticas del código HTML que no siempre son
deseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modo
texto.

Una vez hemos escrito el código deberemos guardar el archivo (con formato de texto) con la extensión .html ( o
.htm en MS-DOS,Windows 3.1 o cualquier otro sistema que sólo acepte tres letras en la extensión. Los siguientes
son nombres válidos de archivos que contengan código HTML: index.html, index.htm,principal.html,
PRINCIPAL.htm, etc...
NOTA: Si el editor o procesador de textos usado para crear la página obliga a usar la extensión .txt al guardar el
archivo en modo texto, deberemos guardarlo con esta extensión, 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 situación.
ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas de las minúsculas. Es un error
común 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 razón es una norma general usar siempre
minúsculas para los nombres de los archivos html.
Últimamente han aparecido nuevas alternativas que facilitan la programación de páginas Web. Son los editores
HTML. Podemos dividir estos editores en dos grupos:
• Asistentes: ayudan a crear el código HTML e incluyen plantillas de código prefabricadas, por ejemplo
HotDog™ (Win), HomeSite™(Win),HTML Editor™ (Mac), Quanta™ (Linux, KDE) o Bluefish™, (Linux,
GNOME).
• Conversores: son programas con otra función que la de la programación 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 páginas web sin escribir código 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™.

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 características de este lenguaje, incluso las más nuevas.

• Aunque se use inicialmente un editor WYSWYG tendremos los conocimientos suficientes para modificar
posteriormente el código 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 páginas 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 archivosfuentes
por separado, por un lado el archivo del editor y por otro el archivo del código 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 combinación con un buen conocimiento del lenguaje HTML nos convertirá en unos grandes programadores de
páginas Web capaces de realizar creaciones impactantes visualmente y de gran calidad técnica.

HTML es un lenguaje descriptivo
Probablemente el lector ha usado alguna vez un procesador de texto (Abiword™, MicrosoftWord™o KWord™)
o un programa de descripción de páginas (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 tamaño",
"sitúalo a 1 cm. del borde", "usa este sangrado para los párrafos", etc... Con HTML el programador no tiene
este tipo de control sobre los elementos que incluirá en su página. El objetivo de este lenguaje será simplemente
describir cómo es una página de manera que examinando esa descripción 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 párrafo, estos son elementos de una lista, etc. posteriormente el navegador decidirá como mostrar
esos elementos.

¿Por qué funciona así? En un principio esta característica del HTML puede resultar molesta para el creador
de la página, que no puede saber como será vista su página más 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 gráficos, que incluso usando un mismo sistema operativo existen diferentes resoluciones
de pantalla, ... Por esta razón el lenguaje necesario para crear páginas debe ser descriptivo y como consecuencia
tras crear una página el programador debe ver como es mostrada con varios navegadores distintos como Netscape
Navigator™ o Microsoft Internet Explorer™ incluyendo algún navegador de texto como Lynx™.
Pero una consecuencia más importante aún de esta característica, es que ha permitido que aparezcan navegadores
vocales, que leen las páginas en vez de mostrarlas. Gracias a ello personas ciegas también han podido disfrutar
del WWW. Es más, esta misma tecnología esta siendo usada para los nuevos navegadores embarcados en coches
que leen la página al conductor para que no se distraiga.
NOTA: Una vez creada una página es recomendable probar nuestra página, no sólo con varios navegadores, sino
también con varias resoluciones de pantalla distintas como por ejemplo: 640x480, 800x600 y 1024x768. Si existe
la posibilidad de probarlo además con un navegador vocal, mucho mejor aún.
Un buen ejemplo de este carácter descriptivo es la definición de titulares, también llamados encabezados, en
HTML. Vamos a adelantarnos un poco en esta introducción para mostrar este ejemplo, en él se muestra como
poner el titular de una página:
<h1>Bienvenido a la página de La Super Editorial</h1>
Con este código estamos describiendo el texto Bienvenido a la página de La Super Editorial como el texto de
máxima importancia en nuestra página, es el titular. En los navegadores más usados como el Netscape Navigator™
o el Microsoft Internet Explorer™ este titular será mostrado como un texto en negrita y de tamaño grande (el
tamaño más grande posible). Sin embargo repetimos una vez más que existen navegadores como pueden ser Lynx
™ o Emacs-W3™ que son bastante usados por la comunidad académica y universitaria que sólo pueden mostrar
texto y no pueden variar el tamaño de la letra. Por esta razón la etiqueta <h1> no dice que el texto que encierra
debe ser de tal tamaño o si debe ser negrita o no. Esta etiqueta sólo le dice que este texto es el más importante de
la página, el titular. Sabiendo esto el navegador que funcione en modo texto puede resaltar dicho titular con los
medios de que dispone, como por ejemplo poniéndolo en mayúsculas o usando distintos sangrados.
También podemos encontrar ventajas de la descripción mirando al futuro. Imaginemos que la informática
evoluciona hasta tal punto que los monitores de dentro de unos años pueden mostrar objetos en tres dimensiones.
Sería muy interesante que el titular de nuestra página fuese en 3-D de manera que resaltase lo máximo posible.
Pues bien, si lo hemos definido como cabecera principal (y no como letra de tamaño 20 puntos y en negrita, por
ejemplo) el navegador sabe que queremos que ese texto sea el más importante y puede actuar de manera inteligente
poniéndolo automáticamente en tres dimensiones, ¡sin que nosotros hayamos cambiado una sola línea de nuestro
código! Parece interesante ¿no?
Una vez a quedado claro cual es el espíritu de HTML, hay que decir que últimamente se han introducido métodos
para conseguir un mayor control sobre las páginas. Estos métodos permiten controlar aspectos como el tamaño de
la letra la disposición (aproximada) de imágenes 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 verán las páginas unos usuarios
u otros y no debemos pretender poder controlar la presentación y diseño de nuestra página hasta el mínimo detalle.

Las bases de HTML
Una vez repasadas unas nociones básicas de HTML y de la programación de páginas Web en general entraremos
de lleno en la programación con este lenguaje. Pronto nos daremos cuenta de la sencillez de este lenguaje lo que
le convierte en un lenguaje muy fácil de aprender y que nos permitirá crear páginas con mayor facilidad aún.
Las órdenes de este lenguaje estarán 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 instrucción 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 línea horizontal debemos escribir:
<hr>
Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los símbolos menor que (<) y mayor
que (>), todas las instrucciones de HTML deben ir encerradas entre estos dos símbolos.
Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes tienen en ocasiones parámetros.
Por ejemplo la etiqueta <hr> tal y como lo hemos hecho anteriormente daría lugar a la línea que vemos en la
figura 1.5, es decir le dice al navegador que dibuje una línea horizontal en la pantalla. Esta línea tiene un grosor
predeterminado y un ancho variable en función del tamaño de la ventana del navegador.

Sin embargo hay muchas formas de pintar una línea y sería deseable poder elegir detalles tales como la anchura y
el grosor que va a tener dicha línea. 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, después 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 algún significado.
En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que significa tamaño en inglés, que
permite controlar el grosor de la línea que será dibujada en pantalla. Veamos un ejemplo, en la figura 1.6 podemos
ver la línea horizontal con diferentes grosores.

El valor que toma el atributo size determina el número de puntos de pantalla o pixeles que debe ocupar, en grosor,
la línea. En posteriores capítulos estudiaremos en detalle la etiqueta <hr> y todos sus atributos.
En la figura 1.6 vemos que el valor numérico 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 están formados
únicamente por números [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 estándar XHTML. Para los curiosos adelantaremos que XHTML es idéntico a HTML pero
con algunas restricciones adicionales del mundo de XML.
Antes de empezar con el código HTML básico conviene hacer saber al lector que aunque en todos los ejemplos
usados hasta ahora las etiquetas usadas estaban escritas en mayúsculas en realidad es indiferente el uso de estas o
de minúsculas. Sin embargo las mayúsculas son de uso común para que sea más fácil distinguirlas del texto y por
tanto seguiremos usando este convenio a lo largo del curso.
En los ejemplos también usaremos distinto sangrado (alineación de los párrafos) para los diferentes elementos
del código 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 código y no
afecta al modo en que los objetos de nuestra página serán mostrados.

Primeros pasos con HTML.

Conocidas ya las principales características de HTML estamos listos para aprender sus principales etiquetas y para
crear nuestra primera página.
 

Estructura de una página
Todo documento HTML está formado por los bloques que podemos apreciar en la figura 2.1. Pasemos a explicar
cada uno de ellos.

En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un documento HTML,
para ello usamos las instrucciones de inicio y fin de la etiqueta <html> al principio y al final de la página
respectivamente:
<html>
Código de la página
</html>
El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo.
La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas
instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera:
<html>
<head>
Elementos de la cabecera
</head>
... Resto de código de la página ...
</html>
En la cabecera de la página se introduce toda aquella información que afectará a toda la página. En un principio
esta información se limitará al título. Este título se indicará con la etiqueta title usando la siguiente sintaxis:

<html>
<head>
<title>Mi primera página WEB</title>
</head>
</html>
El resultado de ver esta página con nuestro navegador es el que se observa en la figura 2.2. Como vemos, el
área de la pantalla donde suele estar la página está todavía vacía, pero si nos fijamos en la cabecera de la ventana
del navegador vemos que el título a pasado de ser Microsoft Internet Explorer ™ a "Mi primera página WEB -
Microsoft Internet Explorer™". Es decir el título que le demos a nuestra página con la etiqueta <TITLE> pasará
a ser el título de la ventana del navegador.

Además cuando un usuario vea nuestra página y decida incluirla en su lista de webs preferidos con la opción
agregar a favoritos del menú Favoritos del navegador (en este caso el explorer) añadirá el nombre que le hemos
dado a nuestra página en dicho menú, tal y como podemos apreciar en la figura 2.3. Aunque el nombre con el que
se almacena un Favorito puede ser cambiado por el usuario, si hemos puesto un buen título, lo suficientemente
descriptivo a cada una de nuestras páginas le evitaremos esa molestia.

Es importante resaltar que nada de lo que se ponga en la cabecera de la página será mostrado en la zona del
navegador dedicada a mostrar el contenido, es decir, en la zona que vemos en blanco en la figura 2.2.
Esto nos induce a pensar que existe otra forma de indicar como será el contenido de la página, pues así es: el
cuerpo es el siguiente gran bloque de nuestro documento HTML, éste quedará delimitado por la etiqueta body.
En su interior introduciremos todos aquellos elementos de los que queremos que conste nuestra página como
pueden ser testo, imágenes, tablas, etc. Conociendo la etiqueta body podemos ampliar el ejemplo anterior para
que incluya texto.

<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les
guste. Fdo. Jorge
</body>
</html>

En la figura 2.4 podemos apreciar como muestra el Internet Explorer™ este código. Como vemos todo el texto
que hemos escrito entre las instrucciones de inicio y fin forman ahora el cuerpo de nuestra página.

NOTA: Es posible que aunque no incluyamos las etiquetas html o body nuestras páginas sean visualizadas con
algunos navegadores. Sin embargo no debemos confiarnos ya que lo más seguro es que con el resto de navegadores
no se vean bien. Por esta razón es muy recomendable usar ambas etiquetas tal y como se ha descrito.
Una vez que ya sabemos insertar contenido en una página pasaremos a estudiar las diferentes etiquetas que sirven
para darle formato a ese contenido.

Los encabezados
Usualmente un documento tiene, además de texto llano, una serie de encabezados o titulares. Para ello el lenguaje
HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia.

Estas etiquetas son: <h1>, <h2>, <h3>, <h4>, <h5> y <H6>. La letra "h" al principio del nombre de estas etiquetas
provien de la abreviatura de la palabra inglesa heading que significa encabezado. Siguiendo a la hache hay un
número del uno al seis que indica la importancia del titular siendo el más importante el uno y el menos importante
el seis. En la figura 2.5 se puede ver un ejemplo de cómo muestra las cabeceras Internet Explorer™.

El código usado en este ejemplo es el siguiente:

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>

NOTA: Los encabezados empiezan siempre en una línea nueva y el texto que les sigue comenzará en la línea
siguiente. Además el navegador podrá mostrar un espacio vertical adicional entre el encabezado y el texto anterior
y posterior.
En él observamos que todos los titulares están en negrita y el tamaño de la fuente usada para cada encabezado va
decreciendo conforme decrece la importancia del titular. Pero hay que tener en cuenta, tal y como comentábamos
en la introducción, que este es sólo un ejemplo y que otros navegadores pueden mostrar estos encabezados de
manera diferente.
Por otro lado los navegadores más usados hoy en día son el Internet Explorer™ y el Netscape Navigator™ y es
normal prestarles una atención especial (aunque no exclusiva). Y en la figura 2.6 podemos apreciar cómo con
este último se muestra los encabezados de una manera prácticamente idéntica. Por esta razón podemos estar casi
seguros de que los usuarios verán los encabezados de la forma mostrada en ambas figuras.

Hay que destacar que los encabezados de h1 a h4 pueden ser usados como títulos ya que los navegadores suelen
usar un tamaño de letra mayor que el habitual para mostrarlos. Sin embargo los encabezados h5 y h6 suelen
ser mostrados con letra más pequeña aún que el texto y por esta razón se usan como notas a pie de página o
comentarios de poca importancia.

El ejemplo mejorado
Ahora que sabemos usar encabezados los utilizaremos para mejorar ligeramente nuestra página. En la figura 2.7
podemos ver cómo se muestran las modificaciones.

Esta página ha sido creada con el siguiente código:
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
<h1>Mi primera página WEB</h1>
<h2>Bienvenida</h2>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les guste. Fdo. Jorge
<h2>Proposito</h2>

En esta página iré practicando con los conocimientos que
adquiera en el curso de HTML
</body>
</html>

Conclusión:

Ya sabemos mucho sobre la programación de páginas. Conocemos las principales características del lenguaje
HTML y qué es necesario para crear un Web. Hemos aprendido además las bases del lenguaje y hemos creado
nuestra primera página de ejemplo, con texto y en cabezados, y la hemos puesto un título.
En la siguiente entrega realizaremos la primera página web completa, con párrafos, imágenes e hiperenlaces.
Aprenderemos también a alinear el texto a los dos lados de la página y a combinar esta alineación con la inclusión
de imagenes. Igualmente veremos cómo es posible crear enlaces a distintos puntos de una página así como a otras
páginas o puntos concretos de estas.