Cada día visitamos una gran cantidad de páginas web en Internet; desde motores de búsqueda, hasta redes sociales. Si bien la temática, el contenido y el diseño de estas páginas web pueden ser completamente diferentes, hay una cosa que las une: la herramienta con la cual fueron creadas. Conozcámosla más a fondo.
Definición de HTML
HTML (siglas en inglés de HyperText Markup Language, «lenguaje de marcado de hipertexto») es un lenguaje de marcas estandarizado para crear páginas en Internet.
El navegador procesa los documentos creados con este lenguaje y el visitante del sitio web ve la página web en la pantalla de su computadora o teléfono.
Historia de su Aparición
El británico Tim Berners-Lee en el CERN de Ginebra inventó el lenguaje de marcas de hipertexto para tener la posibilidad de crear marcas y diseños de documentos en la World Wide Web (WWW). Por cierto, el mismo proyecto WWW también fue desarrollado dentro de las paredes del CERN bajo la dirección del mismo Tim Berners-Lee.
No hay una fecha exacta de la creación de HTML, lo desarrollaron entre 1986 y 1991.
El proyecto HTML rápidamente ganó popularidad gracias a los siguientes factores:
- Simplicidad. La sintaxis de HTML era lo suficientemente simple y limitada para que los documentos con él pudieran crear personas sin conocimientos especiales en programación y maquetación.
- Creación y formato de un documento sin vinculación a ningún entorno de ejecución o visualización. Apareció la posibilidad de crear un sitio web en cualquier programa de edición de texto, por ejemplo, en el bloc de notas, y mostrarlo en cualquier computadora.
Características de HTML
Inicialmente, la lista de comandos de marcado (que se suelen llamar etiquetas) incluía solo 18 elementos, 11 de ellos se utilizan incluso en las últimas versiones del lenguaje.
La tarea principal del lenguaje HTML consistía en mostrar el documento sin distorsiones independientemente del equipamiento técnico del dispositivo. Sin embargo, en las últimas versiones, la dependencia del dispositivo aumentó debido a la aparición de etiquetas para objetos multimedia y posibilidades gráficas más amplias.
Actualmente, la versión HTML de quinta generación está vigente. Apareció en diciembre de 2012 y ahora ha llegado a la versión 5.3. Esta versión es compatible con la mayoría de los navegadores modernos. Hablando de esto, cabe mencionar el concepto de compatibilidad entre navegadores: la capacidad de que el sitio web se vea igual en diferentes navegadores o en diferentes dispositivos.
Los cambios de versiones consistían principalmente en la implementación de nuevas funciones. Por ejemplo, en la quinta versión apareció la compatibilidad con la introducción de nuevos tipos de datos: fecha y hora, teléfono, dirección de correo electrónico. Las nuevas versiones también incluyeron funciones para trabajar con medios: elementos para agregar video y sonido a la página, representación de gráficos complejos mediante JavaScript.
Introducción a HTML
El principio básico del lenguaje de marcado HTML consiste en convertir comandos en objetos visuales que se muestran en el navegador. Por ejemplo, la etiqueta <img>:
<img src="http://unsitioweb.com/g/200/300" alt="Gatito"/>Aquí vemos que la etiqueta puede tener parámetros adicionales. Por ejemplo, aquí así es:
src: es la URL de la imagen que se va a mostrar.alt: es el texto alternativo que se mostrará si la imagen no se puede cargar.
Para crear encabezados, se aplica un grupo de etiquetas <h1></h1> … <h6></h6>. Por ejemplo:
<h1>Encabezado de primer nivel</h1>Y este es un ejemplo de código HTML con el cual se puede crear una página entera:
<html>
<head>
<title>Título</title>
</head>
<body>
<h1>Encabezado de página</h1>
<p>Texto en la página</p>
<img src="http://codigonautas.com/g/200/300" alt="Gatito"/>
</body>
</html>Aquí puedes ver varias secciones:
<html>: esta es la etiqueta que envuelve todas las demás. Su uso le indica al navegador que tiene delante un documento en formato html.<head>: etiqueta dentro de la cual se encuentra la metainformación sobre la página, es decir, la información que no se muestra directamente en el documento. Por ejemplo, el título de la página se especifica dentro de la etiqueta<title>.<body>: «cuerpo» de la página. Dentro de él se ubicará todo el contenido.<h1>: encabezado de la página.<p>: párrafo con texto.<img>: imagen en la página.
Con las etiquetas HTML podemos:
- formatear texto: agregar resaltado en cursiva, negrita, subrayado, cambiar el tamaño de la fuente, usar listas numeradas/con viñetas;
- administrar bloques de texto: crear encabezados de varios niveles, párrafos, saltos de línea;
- administrar tablas: crear filas, columnas, etc.;
- insertar objetos en la página: imágenes, videos, archivos de audio, etc.;
- insertar enlaces, por ejemplo, a un archivo de imagen u otras páginas.
Una función importante de HTML que vale la pena mencionar por separado es la creación de formularios. Dentro del formulario, puedes ingresar texto en un campo, seleccionar un elemento de la lista y luego enviar esos datos al servidor.
Por lo general, los objetos más complejos y las interacciones entre ellos se crean en JavaScript.
Lo Que no se Puede Hacer en HTML
A pesar del impresionante arsenal de posibilidades para formatear páginas, HTML no es todopoderoso. Los creadores del lenguaje supusieron que HTML solo debía ser responsable de la estructura del documento y no debía contener parámetros gráficos de sus elementos.
Al mismo tiempo, la apariencia de la página es muy importante para el usuario del sitio web. ¿Qué debe hacer el webmaster, por ejemplo, si quiere cambiar la fuente en la página? En HTML5 no existe una etiqueta que cambie la fuente. Para resolver este problema, los creadores de la versión 3 de HTML agregaron soporte para una nueva herramienta llamada CSS (Cascading Style Sheets, «hojas de estilo en cascada»). CSS es un lenguaje separado para describir la apariencia de las páginas de un sitio web.
Los estilos son algo muy útil:
- Simplifican el diseño para varios dispositivos y resoluciones de pantalla.
- Reducen el tiempo de diseño de las páginas del sitio web.
- Amplían las posibilidades de diseño de HTML.
Con el uso de CSS, el diseño del sitio web se vuelve más interesante y la carga de las páginas se acelera debido a una menor carga en el servidor.
HTML por sí solo funciona de manera bastante simple y puede surgir una situación en la que tengamos que duplicar el mismo contenido en diferentes páginas. Esto lleva tiempo extra, por ejemplo, al crear elementos comunes del sitio web como encabezado, pie de página y menú continuo. El uso de CSS permite separar el diseño de la plantilla. Solo necesitas conectar el archivo necesario y la página se transforma.
¿HTML es un Lenguaje de Programación?
Para responder a esta pregunta, primero definamos qué se puede llamar lenguaje de programación.
El lenguaje de programación es un sistema formal de signos diseñado para escribir programas informáticos. El lenguaje de programación define un conjunto de reglas léxicas, sintácticas y semánticas que establecen la apariencia del programa y las acciones que el intérprete (computadora) realizará bajo su control. Los lenguajes de programación pueden ser imperativos (cuando le decimos a la computadora cómo queremos obtener el resultado) y declarativos (decimos qué queremos obtener).
A partir de esta definición, podemos decir que HTML es un lenguaje de programación declarativo, ya que con él describimos la estructura final del documento. Pero en un sentido más estricto, la programación se suele entender como el proceso de construir algoritmos para calcular y procesar cualquier dato. Por eso, muchos consideran que HTML es solo un lenguaje de marcado de hipertexto.
En este artículo, intentamos explicar con palabras sencillas qué es HTML, pero probablemente todavía tengas otra pregunta: ¿cómo aprenderlo? Muchos desarrolladores profesionales creen que la mejor manera de dominar HTML, CSS y otras herramientas de desarrollo web es crear tu propio sitio web y practicar en él. Paralelamente, es útil leer las especificaciones (descripciones y conjuntos de reglas) de las tecnologías que has decidido utilizar.
Puedes dar tus primeros pasos en la creación de sitios web con tareas interesantes y artículos actualizados con ejemplos en htmldesdecero. ¡El contenido es gratuito!
