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:

<h1>Prueba fichero HTML</h1>Hola mundo!

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?

1. 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

2. 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:

Servidor base de
datos

Lenguaje servidor
Web

Servidor Web

Navegador web,
estticos

Navegador Web,
dinmicos

MySQL

PHP

Apache

HTML

JavaScript, jQuery...

MariaDB

Python

Ficheros HTML en
disco

IMG

Gif animados

Oracle

Perl, Java

nginx, lighttp...

CSS

CSS3

SQL Server

ASP.NET, C#

IIS

JPG, PNG, GIF

Flash

MongoDB,
PostgreSQL...

Ruby

Rails

Java, activex