HTML – CSS – JavaScript son básicamente las 3 herramientas que nos permiten construir páginas web. Son como hermanas gemelas, pues en en la mayoría de aplicaciones web encontraremos un poco de cada una. Cada una tiene funciones específicas, pero se complementan a la perfección. Veamos en mayor detalle cada una.
HTML
HTML significa Hyper Text Markup Language. De su propio nombre podemos sacar dos características importantes. La primera, Markup, pues HTML es un lenguaje de marcado, visual, que nos permite definir la estructura o contenido de una página web, por medio de componentes. Y la segunda, Language, pues a pesar de llamarse lenguaje, no es un lenguaje de programación en sí, pues no nos permite desarrollar lógica de programación, como sí podemos hacerlo en Python, Java y muchos otros.
Dentro del propio HTML podemos incorporar instrucciones que den estilo a los componentes (tamaño, color, etc). Pero generalmente usamos CSS para este fin. Por otro lado, el HTML soporta scripts, que son bloques de código JavaScript por ejemplo, que tienen que ver con el comportamiento de la página.
Escribimos HTML por medio de <etiquetas>. A continuación podemos ver un ejemplo:
Como todo, HTML también tiene un poco de historia. Es el lenguaje de marcado más utilizado, el estándar. Definido por el World Wide Web Consortium (W3C). Acá te dejo la página oficial, en la que encontrarás gran cantidad de material sobre este tema. Además, ha pasado por una serie de versiones que han agregado y eliminado características. Teniendo por ejemplo HTML , HTML 2, HTML 3, HTML 4, XHTML y HTML 5, en ese orden de aparición.
Básicamente lo que cambia de una versión a otra son los encabezados de los documentos. El siguiente es un ejemplo de HTML 3.
Este de abajo es un ejemplo de XHTML, uno de los más usados.
Existen herramientas en línea que permiten verificar que una página web cumpla a cabalidad el estándar propuesto. Esto permite asegurar que las páginas web son interpretadas de la misma manera en software diferentes. Acá te dejo un enlace al servicio en línea propio del W3C.
La última versión es HTML 5. Esta versión responde de muy buena manera a las nuevas necesidades de los usuarios: contenido multimedia y geolocalización. Estas dos son las grandes incorporaciones de HTML 5 sobre versiones anteriores.
Ahora es posible incorporar audio y vídeos de manera nativa, no se requiere de servicios externos. Además, incorpora componentes de mucha utilidad, como lo son los primeros de la imagen a la izquierda.
CSS
Su nombre significa Cascading Style Sheet, pero normalmente se les dice hojas de estilo. Como hemos mencionado anteriormente, es el lenguaje que nos permite hacer que nuestros componentes se vean mucho más bonitos. Permite jugar con los tamaños, colores, fuentes y muchas cosas más. Permite la separación del contenido del documento de la presentación del documento.
El código CSS puede ser incrustado directamente en el archivo HTML. No obstante, para mejorar el orden, se trabajan archivos propios CSS que se integran a la perfección con los componentes cuando son importados desde el HTML. A continuación, se tiene un ejemplo de CSS inscrustado en HTML (lo que está dentro de las etiqietas <STYLE>).
CSS también tiene versiones. La más moderna y utilizada en la actualidad es CSS 3. Pero para poner un ejemplo, CSS 2.1 tiene más de 90 propiedades con las que podemos jugar.
Acá podemos ver la estructura de un elemento CSS:
El selector es básicamente el componente de HTML al cual le estamos dando estilo. Y para cada selector o componente podemos utilizar las propiedades que necesitemos hasta obtener el resultado que deseamos.
Acá se puede ver un ejemplo de Facebook con CSS (izquierda) y Facebook sin CSS (derecha).
JavaScript
JavaScript sí es un lenguaje de programación pues sí nos permite desarrollar lógica funcional con él. Surge a raíz de la necesidad de que las páginas web hagan algo más que solo mostrar información estática. Permite tener contenido dinámico, gestionar multimedia, crear gráficos, etc. En general, se usa para hacer validaciones básicas de campos de entrada, así como accionar eventos según lo que desee el usuario.
El HTML también soporta código HTML inscrutado. Abriendo etiquetas <script>, como vemos acá abajo:
<script>
// JavaScript goes here
function createParagraph() {
var para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
</script>
Pero también podremos crear archivos independientes (.js) con puro código de JavaScript, que deberá ser importado desde el HTML. Como vemos más abajo, el script lo único que hace es llamar un archivo llamado script.js, que contiene el código JavaScript que necesitamos.
<script src="script.js"></script>
Uniendo todo la anterior, podemos estructurar una página web de la siguiente manera:
- HTML: uno o más archivos HTML que importan archivos CSS y JS. Se recomienda crear un HTML por cada página de contenido.
- CSS: una carpeta CSS, donde vendrán todos los archivos .css necesarios.
- JS: una carpeta JS, que contendrá todos los archivos JavaScript necesarios.
- Assets: una carpeta utilitaria que contendrá archivos usados por la web, como imágenes o vídeos. Assets es muy utilizado, pero también se usa Images o Videos en caso de querer tener aún más orden.
Frameworks: Bootstrap
Existen también tecnologías que nos facilitan mucho la vida. Un framework es básicamente un conjunto de herramientas ya definidas y de las cuales nosotros solo debemos hacer uso. Es decir, alguien ya se tomó el tiempo de desarrollar y nosotros lo único que hacemos es usar sus beneficios.
Bootstrap es uno de los más conocidos y usados. Ellos mismos se definen como «un conjunto de herramientas de código abierto para desarrollar con HTML, CSS y JS». Al tratarse de código abierto quiere decir que es código que podemos copiar y pegar donde queramos. Y para hacer uso de sus código ya precompilados tenemos 2 opciones: descargar el paquete de Boostrap que deseamos o bien conectarnos directamente a sus servidores. En este enlace podés descargarlo. E incorporarlo a tu HTML como se muestra a continuación.
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/bootstrap-theme.css">
Por ejemplo, para obtener unos botones como los que se muestran a continuación, lo único que debemos hacer es incorporar Boostrap a nuestro HTML y copiar el código que viene más abajo. Así de sencillo.
Un framework de este tipo te permite ahorrar mucho tiempo y problemas. Se usa mucho para prototipado, pues es muy versátil. Y lo mejor de todo: es GRATIS.
Como este hay más, podés investigar y usar el que más te guste.
Referencias:
https://rua.ua.es/dspace/bitstream/10045/20201/14/02-HTML.pdf
http://rua.ua.es/dspace/bitstream/10045/20201/15/03-CSS.pdf
https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaScript
https://getbootstrap.com/docs/4.1/components/buttons/
Presentación del curso: HTML, CSS, JavaScript. Prof. Ericka Solano Fernández. Instituto Tecnológico de Costa Rica.
Introducción a las Aplicaciones Web 