"HTML", "CSS" y "JS" - entre otros - son expresiones muy comunes a la hora de hablar sobre desarrollo web. Sus siglas hacen referencia a los diferentes tipos de lenguajes potencialmente involucrados en la creación y construcción de un sitio web. Una compleja tarea que actualmente las plantillas web prediseñadas se han encargado de alivianar haciendo que con poco y nada de conocimiento técnico podamos crear páginas y/o plataformas interesantes. ¿Esto, entonces, quiere decir que aprender cosas como “HTML”, “CSS” y “JS” - entre otros - se ha vuelto una tarea casi innecesaria? ¡Para nada!
Conocer los lenguajes de desarrollo web siempre nos pondrá en una posición de privilegio frente a alguien que no posea dichos conocimientos, porque estaremos en condiciones de hacer personalizaciones más detalladas - tanto estéticas como funcionales - sobre nuestro sitio web (estando, entonces, más cerca de obtener el producto final que realmente deseamos). De lo contrario, si yo no sé modificar directamente, o siquiera entiendo, el código “HTML”, “CSS” y/o “JS” que se esconde detrás de la plantilla web prediseñada; sólo podré modificar hasta donde mi amigable y poco-técnico editor de plantillas me lo permita. ¿Esto quiere decir que trabajar sólo con editores simples está mal? De ninguna manera. La elección de un sistema de trabajo u otro (plantillas web prediseñadas vs escritura "artesanal" del código), o incluso un sistema híbrido, dependerá de la naturaleza y relación costo-beneficio de cada proyecto.
Ahora bien, retomemos la explicación e importancia de cada uno de los elementos de la “santísima trinidad” (HTML, CSS y JS) dentro de un sitio. Sí o sí, tenés que saber para qué sirve cada uno de estos lenguajes. No porque vayas a utilizarlos, sino para que cada vez que entrés a una web puedas identificar rápidamente cada uno de ellos. Esto te dará una experiencia de navegación mucho más "rica" y una visión más profunda de cómo los navegadores y la internet funcionan.
El HTML, dicho en criollo, es el lenguaje con el que se categoriza a los elementos de una web (en “título”, “subtítulo”, “menú”, “párrafo”, “imagen”, “link”, etc) y con el que, a su vez, se los organiza en una primera instancia (primero, segundo, tercero, etc.). Es como el “esqueleto” de la página, ya que cada elemento (cada “hueso”) tiene una categorización y un lugar. El HTML vendría a ser la estructura.
El CSS - por decirlo de alguna manera - se encarga de la parte “estética” de los elementos: los colores, los bordes, el ancho, el alto, la distancia entre los márgenes, el tipo de letra, los efectos, las sombras, el tamaño de la fuente, etc. Necesitamos del CSS para que nuestro sitio se vea bonito y ordenado. De lo contrario, sólo tendríamos un montón de elementos poco estéticos sobre un fondo color blanco. Algo así como una hoja básica de Word con texto negro.
¿Y el JS? Bueno. Esta es posiblemente una de las partes más divertidas. JavaScript se encarga de hacer las páginas más “interactivas” agregando animaciones, actualizaciones automáticas, mapas interactivos, desplazamientos de contenido, formularios funcionales (ej. una calculadora online), etc. En otras palabras, "JS" le da "vida" e "inteligencia" a las páginas. Si no fuera por este lenguaje de programación, el contenido de las páginas web sería bastante estático. ¿Quieren ver un ejemplo de JS? Entren a nuestra sección de “Contacto” y vean cómo el sobrecito se desplaza automáticamente.
» A jugar un poco:
Abrí el editor de código online de JSFiddle.
En el documento HTML coloca el siguiente código: <html> <body> <button onclick="avisoClic()">Haz click</button> </body> </html> Explicación: • <html> y </html>: Etiquetas que indican el inicio y fin del documento HTML. • <body> y </body>: Etiquetas que indican el inicio y fin del espacio destinado al contenido visible de la página. Todo lo que está entre estas dos etiquetas es lo que será visible para el usuario. • <button> y </button>: Etiquetas que indican el inicio y fin del elemento "botón". • onclick = "avisoClic()": Esto puede leerse como "cuándo hagas click sobre este elemento, ejecuta una función llamada "avisoClic()". (continua en el JS) • "Haz click": Texto que llevará el elemento.
En el documento CSS coloca el siguiente código: button{ color: cyan; background-color: grey; } Explicación: • button: Se indica que se va trabajar con la parte estética de los elementos "button" existentes en el HTML. • color: Propiedad que define el color del texto del elemento. • background-color: Propiedad que define el color de fondo del elemento.
En el JS (JavaScript) coloca el siguiente código: function avisoClic() { alert('Se ha dado clic al botón!'); } Explicación: • function avisoClic(): Creamos una función llamada "avisoClic". • alert: Método que sirve para enviar alertas personalizadas. En este caso, el mensaje a enviar será "Se ha dado clic al botón".
Apretá el botón "Run" (arriba a la izquierda) y probá tu página.
Realizá modificaciones sobre el código (ej. cambiar el color del botón).
Probá el código con tus modificaciones.
~ Marcos.