Estos son los tres lenguajes principales que se utilizan en el front-end de nuestra aplicación, es

decir, se utilizan en el lado del cliente en el propio navegador. Pero ¿cuál es la diferencia entre
ellos? ¿Son realmente todos lenguajes de programación? ¡Descubre más aquí en este artículo!

Un poco de la historia de cada uno

Intente imaginar cómo era hace unos años, cuando las empresas que querían compartir
documentos entre ellas, o entre sus propios empleados, no podían hacerlo de forma tan rápida y
práctica como hoy, donde con un solo clic podemos hacer todo este transporte. Para ellos, era
necesario utilizar otras herramientas que requieren mucho más tiempo. Así, en 1991, Tim Berners-
Lee tuvo una gran idea que no solo facilitaría el día a día de empresas, sino que cambiaría el
mundo: diseñó el HTML.

Este lenguaje de marcado, por lo tanto, se desarrolló para hacer más práctico el compartido de
documentos. Sin embargo, a partir del año siguiente, se creó la World Wide Web (WWW), una red
de alcance mundial, que hace de HTML una herramienta utilizada para todo y por todos.

CSS, por otro lado, surgió como resultado de este enorme crecimiento en HTML. Cuanto más se
usaba HTML, más usaban los desarrolladores su creatividad para hacer que las páginas fueran
hermosas y con estilo. Sin embargo, toda esta parte estética fue escrita en el mismo archivo que la
parte estructural, dejándolos gigantes y cada vez más difíciles de entender. Así, en 1995, se creó el
CSS para cuidar la parte estética de la página, aparte de la estructura, papel del HTML.

Finalmente, se creó Javascript, fue a partir de una gran competencia entre los gigantes del
mercado en ese momento: Microsoft y Netscape.

Todo empezó con la creación de un lenguaje de servidor por Netscape para implementarlo en los
servidores web de la empresa. Cuando Microsoft descubrió que esta idea podía tener éxito, no
perdió el tiempo y comenzó a desarrollar el lenguaje JScript para implementarlo en sus propios
servidores web ISS. Al darse cuenta de que su idea estaba siendo copiada, Netscape decidió
desarrollar una tecnología del lado del cliente que se ejecutara en el propio navegador. Terminó
haciendo todo más rápido. Por lo tanto, Microsoft volvió a ver una gran oportunidad de mercado y
decidió desarrollar un sistema similar al de su competidor.

Entonces había dos tecnologías "client-side": JScript de Microsoft y Javascript de Netcape, cada
uno de los cuales funciona solo en los navegadores de sus respectivas empresas. Para estandarizar
Javascript, Netscape no perdió tiempo en enviarlo a la empresa ECMA, lo que le permitió
incorporarlo a la mayoría de los navegadores existentes. De ahí surgió ECMAscript, que no era más
que el nuevo nombre de Javascript, que aún hoy no se usa mucho.

HTML
Su nombre proviene del inglés Hyper Text Markup Language, que significa "lenguaje de marcado
de hipertexto".

¿Qué quieres decir con "lenguaje de marcado"? Bueno, HTML no se considera un lenguaje de
programación como los demás y ya sabrás por qué.

Imagínate una página web, como la que estás leyendo ahora mismo. Puedes ver que hay varios
elementos separados, como encabezado, título, párrafos, imágenes y tantos otros. Toda la
organización de estos elementos se realiza mediante HTML. Se utiliza para crear toda la estructura
de la página y, para ello, utiliza las famosas tags (etiquetas) para indicar dónde se implementará
cada tipo de elemento.

Por ejemplo, si desea insertar un párrafo en la pantalla, puedes usar la tag <p> para eso,
colocando el texto deseado dentro del elemento, como se muestra a continuación:

<p>Este es un párrafo</p>

Por lo tanto, existen varias tags de diferentes estructuras para ensamblar el esqueleto de la
página. Pero, ¿cómo es posible que este párrafo sea azul? ¿O cambiar la fuente de la letra? Aquí
viene nuestra próxima tecnología: CSS.

CSS

Cascading Style Sheet, más conocido como CSS, es un lenguaje de estilos que, como HTML,
tampoco se considera un lenguaje de programación. Es la encargada de separar la parte
estructural de la aplicación (que estará en manos de HTML) de la parte estética. Para usar CSS,
usamos la siguiente sintaxis:

selector {

propiedad: valor;

}
El selector será el elemento que queramos estilizar (podría ser una tag, una clase, un
identificador ...), la propiedad será lo que vamos a cambiar (como color, tamaño de fuente,
ancho ...) y el valor será realmente el cambio (como: rojo para color, 18px para tamaño de fuente,
y así por delante).

Entonces, cuando usamos una tag HTML como la tag <p> que usamos como ejemplo anterior,
podemos diseñarla de la siguiente manera:

p{

color: blue;

Con eso, todos los párrafos se volverán azules.

Un dato más interesante: si traducimos el nombre de esta tecnología, tendremos “hoja de estilo
en cascada”. ¿Qué significa eso?

CSS se puede escribir dentro del archivo HTML, usando el estilo como elemento <style> o como
atributo de algún otro elemento <p style="">. También se puede escribir en un archivo separado,
solo CSS, importándolo al documento HTML de la siguiente manera:

<link rel="stylesheet" href="nombre_del_archivo_css.css">

Sin embargo, algo muy importante a destacar es la posibilidad de utilizar más de un archivo CSS al
mismo tiempo, para estilizar la aplicación. De ahí la palabra "cascada". Esto permite varias
interacciones diferentes, pero debes tener cuidado de no perderte y confundir el código, siempre
siguiendo las reglas para esto.

Javascript

Para completar la gran tríada del desarrollo front-end, contamos con Javascript, el único lenguaje
de programación de las 3 tecnologías mencionadas.

Puedes ver que ya hemos creado la estructura de la página con HTML y hemos aplicado estilo a los
elementos con CSS. Pero, ¿qué pasa con las funcionalidades dinámicas que vemos cuando abrimos
un sitio web?, ¿cómo suceden?

Esto lo hace Javascript. Agrega movimiento a las páginas web, además de permitir el
procesamiento y transformación de los datos enviados y recibidos. Te permite crear contenidos
que se actualizan de forma dinámica y animada, dando vida a aplicaciones que antes solo estaban
estructuradas estáticamente con HTML.

Siempre que vea un cuadro de alerta sonando en un sitio web, o un mecanismo de autocompletar
en algún campo, sepa que Javascript está funcionando. Un ejemplo de código usando el cuadro de
alerta:

alert(‘Hello World’);

Al igual que CSS, Javascript se puede escribir dentro del código HTML:

<script> alert(‘Hello World’); </script>

Cómo en un archivo separado, importándose dentro del atributo de ese mismo elemento:

<script src="nombre_del_archivo_js.js"></script>

Algo importante a tener en cuenta es que este lenguaje se puede utilizar tanto en el lado del
cliente como en el lado del servidor, utilizando tecnologías necesarias para ello, como Node.js.

El papel de cada uno en la aplicación.

Por tanto, después de conocer un poco sobre cada una de estas tecnologías, es posible ver las
diferentes funciones que desempeñan dentro de una página web:

 HTML: lenguaje de marcado utilizado para estructurar elementos de la página, como

 CSS: lenguaje de estilo utilizado para definir colores, fuentes, tamaños, posicionamiento y

 Javascript: lenguaje de programación utilizado para hacer la página con más movimiento,

Comparando cada uno de ellos ahora, podemos usar el cuerpo humano como una página web
como ejemplo, de la siguiente manera:
HTML es el esqueleto, formado por los huesos que lo sostienen. CSS es la piel, el cabello y las
ropas, creando la apariencia que realmente vemos cuando miramos a alguien. Y por fin,
Javascript es el músculo que le da movimiento al cuerpo.