Introduccin a HTML

HTML son las siglas de Hyper Text Media Language, el lenguaje documental empleado para
definir pginas web que pueden ser visualizadas por un navegador.
No es un lenguaje de programacin, sino un lenguaje documental que define cmo visualizar un
documento, en este caso una pgina web. Puede contener elementos de otros lenguajes, como
CSS, o Javascript (este ltimo si es un lenguaje de programacin).
En cualquier ordenador, los ficheros de datos utilizados por los programas pueden estar en
formato texto, que solo incluyen caracteres visibles, como los ficheros .txt que se editan con el
bloc de notas de Windows; o en formato binario, que incluye codificacin de caracteres no
visibles, como los antiguos ficheros .doc o .xls de Office. Esta ltima prctica, que favoreca
mantener en la oscuridad en mtodo utilizado para representar la informacin, est casi en
desuso, utilizando en su lugar ficheros de texto con lenguajes visualmente interpretables por una
persona, quizs antes comprimidos en formato zip para que ocupen menos tamao (como por
ejemplo los ficheros .docx y .xlsx de las ltimas versiones de Office).
En nuestro caso utilizaremos el lenguaje HTML en ficheros de texto, que pueden ser abiertos por
programas sencillos como el bloc de notas, aunque tambin utilizaremos programas ms
complejos que nos ayuden a trabajar mejor.
Por lo tanto, si creamos un fichero ejemplo.html, y escribimos en l algo como esto:

Si arrastramos y soltamos el fichero creado sobre un navegador, veremos como resultado que la
primera frase aparece en mayor tamao como una cabecera, y la segunda aparece de menor
tamao en una segunda lnea.

Enhorabuena, has creado tu primer fichero HTML!

Puede que no est siendo tan fcil como parece Qu problemas nos podemos encontrar en
este primer intento?
Si creamos el fichero con el bloc de notas de Windows, ste le aade al final la extensin .txt por
defecto. Si no tenemos activado visualizar las extensiones de fichero, aunque le intentemos
cambiar a mano la extensin, estaremos manteniendo la antigua extensin .txt

Si hacemos doble click sobre el fichero, puede que el programa asociado a esa extensin sea el
bloc de notas, u otro editor instalado en el ordenador. Arrastrar y soltar el fichero sobre el
navegador abierto nos asegurar que lo que ocurra sea que se visualice en el navegador.
Resueltos estos posibles problemas, podemos intentar facilitarnos el trabajo utilizando un editor
dedicado para HTML (aunque tan solo con el bloc de notas es posible hacer alguna cosa
sencilla). A continuacin os recomiendo varios editores gratuitos, aunque tambin existen otras
alternativas comerciales ms complejas:

Sublime Text: Para Windows, MacOS o Linux, la versin gratuita puede mostrar mensajes
ocasionales pidindonos que nos registremos. Uno de los ms utilizados por los expertos. La
versin 2 se actualiz por ltima vez en 2013, as que os recomiendo la versin 3 aunque est
etiquetada como beta.
Notepad++: Gratuito, solo para Windows, casi todo el mundo lo tiene instalado como alternativa
puntual, aunque no lo utilicemos todos los das.
Notepad2-mod: Una alternativa muy ligera al Bloc de notas de Windows, poco conocida, pero
bastante utilizada en mi caso, preferible para m incluso a Notepad++ (aunque no incorpora
pestaas)
gEdit: Los usuarios de Linux lo traern ya instalado si utilizan el escritorio Gnome.

Obviamente las alternativas comerciales son totalmente vlidas, como Dreamweaver o

Webstorm, pero en este curso queremos concentrarnos en los fundamentos del lenguaje, y no
en las cualidades de una herramienta en concreto.
Si tienes curiosidad sobre qu utilizo yo habitualmente un pequeo IDE llamado PhpDesigner,
pero ms que por sus virtudes para la edicin en HTML, por su inteligente funcionalidad de
sugerencia de cdigo en PHP. Y si te interesa el uso de Vim o Emacs buena suerte, amigo, te
har falta.
En principio, si es preciso concretar un IDE para este curso, haremos referencia a Sublime Text.
Ya tenemos en nuestras manos una herramienta para editar ficheros de texto en nuestro
ordenador, y una manera de comprobar el resultado en el navegador. Pero qu relacin tiene
esto con las pginas web alojadas en Internet?
Estos mismos archivos que vamos a crear pueden ser colocados en un servidor web, y permitir
mostrar una pgina accediendo a la direccin de internet de dicho servidor. Estos archivos
obviamente siempre mostraran el mismo resultado al acceder a la pgina, haciendo necesario
cambiar a mano el contenido del archivo para mostrar cambios en las pginas.
En los inicios de Internet, esto se haca as y se sigue haciendo cuando queremos poner en
marcha una pgina con una informacin que no cambia nunca, y que va a ser visitada por
muchsimos usuarios, por lo que se debe mostrar lo ms rpido y con el mnimo de recursos
consumidos en el servidor. Pero en la mayora de sitios web, en realidad el contenido no se
almacena en un fichero esttico, sino que un programa en un lenguaje de programacin (por
ejemplo, PHP, Java o C#), crean sobre la marcha el contenido HTML y lo envan al navegador

como si se tratara de un fichero que ya exista. Estos programas, a su vez, para almacenar los
diferentes datos sobre contenidos, usuarios y estado de las sesiones, utilizan un motor de base
de datos, como MySQL, Oracle o SQL Server. Y conforme entramos en ms detalles, aparecen
ms tecnologas y la cosa se complica.
Pero en el fondo, el contenido siempre es HTML. En la mayora de los casos, los contenidos se
almacenan en ficheros de plantilla, donde est escrito en HTML cmo se van a visualizar
algunos elementos, y luego se sustituyen unas marcas especficas por el contenido dinmico.

En definitiva lo que nos interesa saber es que todo el conocimiento que vamos a adquirir creando
ficheros HTML estticos es de utilidad inmediata para proyectos ms complejos.
Por ltimo, es preciso que hablemos un poco sobre versiones de HTML y compatibilidad.
Seguramente no ser desconocido al lector la histrica lucha en el pasado entre navegadores
(Microsoft Internet Explorer y Netscape Navigator) por controlar el estndar HTML. En la
actualidad afortunadamente la ltima versin de HTML, la 5, constituye un estndar que es
aceptado en casi todo su contenido por todos los navegadores. Aunque cada navegador puede
ofrecer funcionalidad particular adicional, HTML5 de base nos ofrece todo lo que podemos
querer utilizar. Por ello, en este curso trabajaremos siempre sobre HTML5 sin hacer demasiada
distincin sobre qu es nuevo y qu no (ya que se trata de un curso completo y no solo vamos a
tratar las novedades). Pero no podemos olvidar que siempre cabe alguna funcionalidad de
HTML5 funcione de manera diferente en distintos navegadores, cosa que mencionaremos e
incluiremos referencias para estudiar estos casos en mayor detalle.
Existen por tanto multitud de tecnologas asociadas al desarrollo web, pero en todas ellas el
HTML es un elemento indispensable.
Algunas de las tecnologas involucradas con la web:

Comencemos a crear ya un documento HTML. Todo documento en HTML5, incluso aunque est
totalmente en blanco, debera contener al menos el siguiente contenido.

Los espacios en blanco antes de cada lnea pueden conseguirse introduciendo espacios
individuales, pero es ms prctico utilizar la tecla tabulador para introducir de golpe la separacin
necesaria. En estos ejemplos vers las letras coloreadas como lo hara un editor HTML como los
mencionados antes, aunque en realidad estos caracteres no tienen ningn color asociado, es
solo algo que el editor hace para facilitar la lectura del documento.
Qu quieren decir todos estos caracteres? Identificamos que tenemos ciertos elementos
encerrados entre smbolos < y >, que son llamados etiquetas. ciertas etiquetas tienen la
misma palabra, pero precedida por el smbolo /. Se trata en realidad de cierre de etiquetas, y
consideramos que entre la apertura de etiqueta (la primera vez que aparece) y el cierre, todo lo
que est en medio es el contenido de la etiqueta. Vemos por tanto que una etiqueta puede
contener a su vez varias etiquetas.
El significado exacto de estas etiquetas es el siguiente:

< !DOCTYPE html >: Esta es una etiqueta especial que indica que la versin de HTML
es la 5. Tiene esta estructura ya que procede de la sintaxis de XML, un lenguaje ms
genrico que HTML que permite definir sublenguajes como el que estamos estudiando.
< html >: Inicio de todo el documento HTML

< head >: Inicio de la cabecera del documento, donde especificaremos metainformacin
del mismo, que no forma parte del contenido visualizable directamente en la ventana
principal del navegador.
< title >: El texto en su contenido es el ttulo de la pgina, que ser mostrado en la
pestaa o ttulo de la ventana del navegador, entre otras cosas.
< body >: El contenido de esta etiqueta ser lo que se muestre dentro del navegador

En realidad, el ejemplo anterior como hemos dicho no muestra nada. Un ejemplo equivalente al
primero que realizamos en el apartado anterior, sera el siguiente.

En este caso, adems de aadir el contenido de prueba de la pgina, tenemos algunos

elementos ms:

< meta charset=utf-8 >: Indica al navegador que el contenido de la pgina est
codificado en formato UTF-8. Debe ser lo primero que aparezca en la etiqueta < head >

Por qu es necesario incluir esta etiqueta? Resulta que aunque el texto plano solo contenga
caracteres visualizables, existen diferentes estndares para representar caracteres extendidos
(aquellos no existentes en el lenguaje ingls), como acentos o ees, o smbolos en japons,
chino, ruso, etc. Para asegurarnos que nuestra pgina utiliza bien estos caracteres, y que el
navegador los puede representar correctamente, puede ser necesario incluir esta etiqueta.
Tambin deberemos asegurarnos que el editor de texto guarda el documento con codificacin
UTF-8. Bajo Windows, la mayora de los programas trabajan con la codificacin ANSI, que no es
la ms ptima por diversos motivos de compatibilidad.
Para asegurarnos que guardamos el documento con codificacin desde Sublime Text,
elegiremos El bloc de notas de Windows no lo hace (utiliza ANSI), por lo que para esta ocasin
referenciamos a Sublime Text, elegiremos la opcin de men File, Save with encoding, UTF-8
with BOM. En notepad2-mod, la opcin est en File, Encoding, UTF-8. En Notepad++ est en
Encoding, Encode in UTF-8. En el Bloc de notas (si, tambin puede cambiarse aqu), est en
Archivo, Guardar cmo, y en dilogo para elegir la carpeta de destino, hay una opcin
Codificacin que habr que establecer como UTF-8.

Al cambiar la codificacin, y volver a visualizar el documento en el navegador, no notaremos un

gran cambio ya que no habamos utilizado acentos en el contenido. Pero en el ttulo de pestaa
del navegador ahora deberan verse correctamente los acentos utilizados.
Si quieres profundizar en el conocimiento sobre las codificaciones de caracteres y UTF-8, un
buen punto de partida es este enlace en espaol de la W3C (World Wide Web Consortium), el
organismo encargado de la estandarizacin de la web:
http://www.w3.org/International/questions/qa-what-is-encoding.es.php
Otros enlaces tiles:

https://es.wikipedia.org/wiki/Codificaci%C3%B3n_de_caracteres
https://es.wikipedia.org/wiki/UTF-8

Aunque el ejemplo anterior es un documento HTML completo correcto, por brevedad en muchos
ejemplos incluimos tan solo el contenido que debe aparecer dentro de la etiqueta < body > del
documento.
Habrs observado que, en el ejemplo anterior, hay espacios o tabuladores introducidos que no
se han mostrado en el resultado final, as como un salto de lnea entre la cabecera y la lnea
siguiente que no hemos introducido en el texto original. Esto ocurre as porque en HTML se
ignoran los espacios iniciales y los extras que separan una palabra de otra a partir del primero.
Por tanto, estos dos ejemplos producen el mismo resultado.

Esto nos permite utilizar los espacios, tabuladores y nuevas lneas para formatear el cdigo del
documento HTML de forma que sea ms legible, y quede de manifiesto la anidacin de
etiquetas, sin que afecte al resultado final. Pero cmo conseguiremos entonces aadir dichos
espacios y nuevas lneas cuando lo necesitemos? Lo veremos en el siguiente apartado.

Etiquetas comunes

Ahora que podemos crear un documento HTML bsico, nos interesa conocer qu etiquetas
tenemos a nuestra disposicin y cmo utilizarlas.

< h1 >: Elemento de cabecera de primer nivel

< h2 >: Elemento de cabecera de segundo nivel

< a >: Enlace

< img >: Imagen

< p >: Prrafo

< br >: Nueva lnea

Los elementos h1, h2, h3, y sucesivos, indican textos de cabecera de primer, segundo, tercer y
sucesivos niveles. Adems de convertir representar el texto con cierto tamao, incluyen el
introducir un nuevo prrafo con cualquier contenido incluido antes y despus de estos
elementos.
El elemento a es muy importante, nos sirve para crear enlaces en nuestro documento.
Podemos ver cmo se utiliza utilizando un ejemplo donde incluiremos algunos conceptos
adicionales.

Aqu vemos que la etiqueta < a >, antes del smbolo > que marca su apertura, incluye una serie
de elementos llamados atributos, seguidos de un signo igual y una serie de valores entre
comillas. De nuevo, los espacios y retorno de lneas adicionales nos sirven para dar un formato
ms inteligible al ejemplo, y hubiera sido equivalente haberlo escrito de la siguiente manera.

Los atributos de este ejemplo tienen el siguiente significado:

href: Especfico de etiquetas < a >, representa el destino del enlace, que ser cargado por el
navegador al pulsar sobre ste. Puede ser a su vez de varios tipos
Enlace http interno a otro punto de la pgina actual
Enlace http relativo o absoluto a otra pgina del mismo dominio
Enlace http absoluto a otra pgina en otro dominio
Enlace a otro protocolo, por ejemplo mailto para envo de email
id: Identificador nico del elemento, para su manipulacin en cuanto a estilo con CSS, o de
comportamiento mediante Javascript. No se puede repetir en el documento actual
class: Nombre de la clase del elemento, para su manipulacin en cuanto a estilo con CSS, o
de comportamiento mediante Javascript. Puede repetirse en el documento actual, y un
mismo elemento puede tener ms de una clase (separadas por espacio al definirlas aqu).
target: Especfico de etiquetas < a > y formularios, en este caso especifica dnde se debe
abrir el enlace al pulsarlo:
o _blank: Una nueva pestaa o documento
title: Define el ttulo del enlace. Por ejemplo, en enlaces que pueden tener como texto leer
ms, define el ttulo completo del artculo de destino.

Tenemos entonces que la etiqueta < a > representa un enlace en el documento, que al pulsarlo
llevar a lo especificado en el atributo href. Todo el contenido desde la apertura de < a > hasta el
cierre de < /a > podr ser pulsado para llevarnos al nuevo destino

Estos no son todos los atributos posibles de esta etiqueta. Si quieres consultar la extensa lista de
posibles atributos, tienes a tu disposicin la referencia oficial de la W3C (World Wide Web
Consortium) en: http://www.w3.org/TR/html5/
Una referencia ms light, aunque a veces imprecisa o incluso errnea (procede con cautela), es
la que puedes encontrar en la siguiente web (no afiliada con la W3C, a pesar de su nombre):
http://www.w3schools.com/html/default.asp.
Como hemos comprobado, necesitamos alguna herramienta para introducir prrafos o retornos
de lnea, y lo conseguiremos con las etiquetas < p > y < br >.

Si nos fijamos, la etiqueta < br > no tiene cierre, ya que, al representar una nueva lnea, no tiene
ningn contenido en su interior. Esto tambin podemos representarlo escribindola como: < br />
Aunque la forma < br > est aceptada como vlida en HTML5.
Otra etiqueta importante es < img >, que nos permitir aadir imgenes al documento. Si
colocamos una imagen de nombre prueba.jpg en el directorio que nuestro documento HTML,
podemos escribir un ejemplo como ste para utilizarla.

En este caso la etiqueta < img > tampoco tiene contenido que incorporar, por lo que en lugar de
cerrarla con < /img >, escribimos el final de la etiqueta de apertura como /> para indicar que se
cierra automticamente. De nuevo, en HTML5 es opcional utilizar este cierre.
En esta etiqueta, hemos definido dos nuevos atributos:

src: Define la ruta absoluta o relativa a una imagen que est en un formato como JPEG,
GIF, o PNG
alt: Texto alternativo que describe a la imagen. Es de especial importancia para la
accesibilidad (dispositivos que permiten navegar a personas con problemas de visin),
as como para la optimizacin para buscadores.

Por ltimo, existen unas etiquetas que permiten hacer listas de elementos, con posibilidad de
otras listas anidadas en su interior. Un ejemplo puede ser el siguiente:

En este caso, las etiquetas que estamos utilizando son:

ul: Lista no ordenada (cada elemento es precedido por un crculo slido, no un nmero).
li: Elemento de lista. Puede contener otras listas a su vez

Existen muchsimas etiquetas ms, y un conocimiento profundo de todas ellas requerira un

curso completo. Pero con esto hemos visto suficientes casos como para poder avanzar en otros
contenidos, as como para poder buscar referencias puntuales cuando necesitemos otras
etiquetas.