1. ¿Qué es HTML

HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una seríe de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.

2. Aspectos del 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 del WWW incluida 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.

3. Historia del HTML

HTML o lenguaje de marcado de hipertexto, se ha convertido en el lenguaje de marca más importante a día de hoy, gracias al crecimiento de Internet, la necesidad de ofrecer servicios remotamente y en definitiva, la necesidad de poder ofrecer fácilmente información de una forma elegante y sin morir en el intento. HTML es un derivado de SGML y nació en 1991, gracias a Tim Berners-Lee (que trabajaba en el CERN), que ante la necesidad de compartir información entre científicos creó la primera definición del lenguaje.

Etapa liderada por el IEFT

En la primera publicación del lenguaje se incluían un total de 22 etiquetas, de las que solo persisten a día de hoy unas 12 más o menos (como <u>, <i>…), aunque las siguen reconociendo los navegadores actuales. Tras este periodo, en 1993 fue

creado el borrador por la ITEF para definir definitivamente HTML como un estándar, que además incluía una definición de tipo de documento SGML, que definía su gramática.

Este borrador no llegó a buen puerto, pero fue el inicio para que Mosaic (aquel histórico navegador) tuviese un gran éxito. Paralelamente surgió otro borrador que definía HTML+, que incorporaba también las tablas en la definición de las características.

Tras la expiración de borrador de HTML y HTML+ la IEFT creó en 1994 el HTML Working Group, que definió la especificación de HTML2.0. Esta vez, también de forma paralela a HTML2.0 surgió la propuesta de HTML3.0, que no tuvo prácticamente relevancia mientras estaba presente HTML2.0.

Fundación del World Wide Web Consortium (W3C)

Como para estos entonces, ya en 1997, eran muchas las empresas que querían tomar decisiones sobre HTML se creó el W3C y se dejó de influir el IEFT.

En enero de 1997 se publico HTML3.2 como recomendación de la W3C, que fue la primera definición redactada exclusivamente por el consorcio, fuertemente influenciado por Netscape. Inicialmente incluía formulas matemáticas, pero al final se omitieron, dando lugar a MathML (que tras 15 años y estando en la versión 3.0, prácticamente no tiene uso, habiendo sido desbancado por TeX).

HTML4

Y aquí ya llegamos a algo más actual, al lenguaje que hasta hace nada era el todo en el diseño web y ahora sigue siendo parte esencial. HTML4.0 fue lanzado como recomendación a finales de 1997 y disponía de tres variantes: transicional (se permiten elementos obsoletos), estricta (se prohíben elementos obsoletos) y de conjuntos de marcos (se usaba para las webs que están formadas por frames). A finales de 1999 se publicó HTML4.01, que no incorporó nada pero se publicó para corregir erratas.

HTML como estándar

Tras años y años creando distintas especificaciones a mediados del 2000 se creó la normativa ISO que definió HTML4.01 (strict) como estándar internacional. Tras la estandarización surgieron las alternativas basadas en XML, que era XHTML (teniendo la versión 1.0, 1.1, 2.0 y la supuesta XHTML5).

HTML5 y nacimiento de WHATWG

En 2004 se creó la Web Hypertext Application Technology Working Group (WHATWG), con el propósito de crear un nuevo estándar que consiga llevar la

web a un nivel que solo se conseguía gracias a Flash (lo que destrozaba totalmente la filosofía de la web, al ser una herramienta de pago, por lo menos para crear el contenido). En esta especificación se incluyen grandes mejoras en el apartado multimedia, permitiendo el uso de audio, video, gráficos vectoriales y creación de contenido den 2D y 3D mediante Canvas.

4. Estructura de un documento HTML

Un documento HTML está definido por una etiqueta de apertura <HTML> y una etiqueta de cierre </HTML>. Dentro de este se dividen dos partes fundamentales la cabecera, delimitada por la etiqueta <HEAD> y el cuerpo, delimitado por la etiqueta <BODY>. Por tanto la estructura de un documento HTML será:

5. <HTML> 6. <HEAD> 7. Definiciones de la cabecera 8. </HEAD> 9. <BODY> 10. Instrucciones HTML 11.</BODY> 12.</HTML>

     Ninguno de estos elementos es obligatorio, pudiendo componer documentos HTML que se muestren sin ningún problema sin incluir estas etiquetas de identificación. Si se utilizan elementos que forzosamente deban ser incluidos en la cabecera (como la etiqueta de titulo), no serán reconocidos correctamente si no se incluyen entre las etiquetas de <HEAD>.      En los próximos apartados explicaremos de forma separada los componentes de la cabecera y del cuerpo de un documento HTML.

5. Sintaxis del HTML

Para fomentar una sólida compresión del HTML, miraremos la estructura del lenguaje propiamente dicho. El funcionamiento de la sintaxis del HTML es análogo a la sintaxis de la gramática española, pero, por supuesto, mucho más sencillo.

El HTML es en realidad un lenguaje muy lógico. Ciertamente, hay excepciones a las reglas, y hay modificaciones o interpretaciones de algunas de éstas. De todas formas, una vez que asimiles la estructura básica, empezarás a notar que el HTML es simplemente un conjunto de piezas lógicas que hacen de él un lenguaje muy cómodo de usar.

Por supuesto, está el tema que se comentó en el capítulo "Comprendiendo el HTML", de que el HTML es un lenguaje que evoluciona. Mientras que la evolución

es un estado natural del HTML, estos cambios normalmente no afectan a las reglas básicas. Mientras que varios elementos de este lenguaje se hacen obsoletos y otros nuevos son añadidos, la sintaxis, o la estructura correcta, raramente sufren cambios.

Para comprender el concepto de sintaxis, piensa en una frase. Tu tienes un sujeto y un verbo. Los adjetivos y los adverbios se añaden para aportar cualidades y comportamiento, haciendo la frase más comprensiva.

El HTML es, en el fondo, no muy diferente a una simple frase. De hecho, los componentes del HTML siguen el mismo concepto de sujeto, verbo y adjetivos/adverbios.

6. Elementos de bloque y en línea

Elementos de bloque

Los elementos de bloque son elementos que ocupan todo el espacio disponible a lo ancho y el espacio necesario (en función de su contenido) a lo alto y se agrupan en vertical, apilandose como ladrillos.

Esto es un elemento de bloque

Esto es otro elemento

Los elementos anteriores tienen una distribución aproximadamente así:

A un elemento de bloque se le puede fijar un ancho especifico para evitar que ocupe todo el espacio aunque se seguirán apilando en vertical salvo que usemos la propiedad “float” (que veremos más adelante).

Algunos elementos de bloque son “div”, “table”, “p”, …

Elementos de linea

Los elementos de linea son elementos que ocupan el espacio necesario (en función de su contenido) tanto a lo ancho como a lo alto y que se apilan horizontalmente mientras tengan espacio, una vez alcanzado el ancho máximo (delimitado por los elementos que los contengan) saltarán de linea y seguirán apilandose en horizontal.

A los elementos de linea no se le puede asignar un ancho fijo, ya que son muy “rebeldes” y la ignorarán.

Algunos elementos de linea son “span”, “em”, “b”, …

7. Referencias de carácter

Una referencia de caracteres es una pequeña pieza de código usada para representar ciertos caracteres en documentos HTML. Principalmente usada para insertar símbolos que no pertenecen al juego de caracteres (o en muchos casos, símbolos difíciles de ingresar), las referencias de caracteres pueden insertarse utilizando una expresión regular. De echo, cada referencia de caracteres puede insertarse de tres formas diferentes:

Por su nombre de entidad: Cada referencia de caracteres tiene una entidad asignada. El formato apra insertar un símbolo por su nombre de entidad está compuesto por un símbolo "&" seguido de su nombre de entidad y un punto y coma (";"). Por ejemplo, el símbolo de la libra esterlina ("£") puede ser insertado como "&pound;".

Por su valor decimal: Tal como con las entidades, un número único es asociado con cada referencia de caracteres. El formato es compuesto por un símbolo "&" seguido de un signo numeral ("#"), el número asociado y un punto y coma (";"). Por ejemplo, el símbolo de la libra esterlina ("£") puede ser insertado como "&#163;".

Por su valor hexadecimal: Este método funciona exactamente como el del valor decimalcon la diferencia que el número se escribe en formato hexadecimal y una "x" (en minúscula) se agrega a continuación del signo numeral ("#"). Las letras en el número hexadecimal deben ir en mayúsculas. Por ejemplo, el símbolo de la libra esterlina ("£") puede ser insertado como "&#xA3;".

Muchos navegadores no proveen soporte para todas las entidades de caracteres y usualmente representan un cuadrado blanco ("□") o un signo de pregunta ("?" ó "�") en su lugar. Por otra parte, la notación hexadecimal para referencias de caracteres tampoco es soportada por muchos navegadores, lo que la hace una forma poco fiable de reproducir símbolos. Dicho esto, queda claro que la mejor forma de representar referencias de caracteres es a través de la noración decimal.