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.

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
Lenguaje servidor Navegador web,
de datos Web Servidor Web estticos Navegador Web, dinmic

MySQL PHP Apache HTML JavaScript,

jQuery...

MariaDB Python Ficheros HTML IMG Gif animados

en disco

Oracle Perl, Java nginx, CSS CSS3

lighttp...

SQL Server ASP.NET, C# IIS JPG, PNG, GIF Flash

MongoDB, PostgreSQL... Ruby Rails Java, activex

Etiquetas, atributos. Cabecera y cuerpo del
documento.
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.