Una simple forma simple y sencilla de entender la estructura de una página web.
Si alguna vez te preguntaste: «¿cómo se diseñan las páginas web?», o has tenido curiosidad, o estas empezando en el mundo de la programación (incluso si no). La imagen a continuacion, es perfecta para explicar cómo están constituidas las páginas webs que visitamos en nuestro día a día.
Utilizaremos el cuerpo humano, como se muestra en la imagen, para describir cómo funciona la disposición básica de una página web. Explicando los tres lenguajes fundamentales en el frontend, que es parte visual del sitio web.
HTML
Empezando por el HTML, HyperText Markup Language (Lenguaje de Marcas de Hipertexto). Es un lenguaje de etiqueta (tags) que conforma la página. Definiendo los contenidos como la cabecera, el documento, el pie de página, encabezados, párrafos, etc.
Como función, es mantener un orden del contenido. Al igual como los huesos, crea una estructura de dónde va la cabeza, el cuerpo, los brazos, las piernas, etc. mostrando la información de manera organizada a las personas.
La palabra “HyperText” de HTML, es quien permite conectar las diferentes páginas web entre sí. Incluso si es dentro o fuera de los diversos sitios web. Y “Markup”, por sus etiquetas (tags), para anotar textos, imágenes y otro contenido para ser mostrado en un navegador web.
Entendido esto, te preguntarás: ¿Cómo se organizan las páginas web? Bueno, la composición base del HTML está conformada por tres secciones: Header, Body y Footer.
- La cabeza (Header). Donde nos encontramos la barra de navegación de la página, su introducción o ambas.
- El cuerpo (Body), que se enfoca en todo el contenido principal de la página. Como los artículos, la información, imágenes, videos, etc.
- Los pies (footer), ubicado al final del sitio web. Donde se agrega la información menos detallada o acerca de pequeños datos acerca de la página (Como de quienes la diseñaron, sus contactos, etc).
Es momento de hablar de la piel del sitio web, pasando al Cascading Style sheets, abreviado y conocido como CSS.
CSS
Este segundo lenguaje tiene la finalidad de darle un diseño entendible al usuario y cómo deben mostrar los elementos del sitio web. Como la forma, posición, colores, espaciados, el estilo de texto, el tamaño, entre otros.
Básicamente es la presentación/diseño de la página. Toda la parte estética.
A nivel de cuerpo humano, sería como mostrar el color de piel, el tamaño de los ojos, las formas de la boca, etc. Sin este elemento las páginas web estarían desorganizada, fastidiosa de leer y mostrando el contenido de manera inentendible el contenido para el usuario.
Javascript
Y por último, tenemos a JavaScript. Los músculos del sitio web.
Es un lenguaje de programación que le da acciones a la página para que el usuario interactúe con ella. Como mostrar actualizaciones de contenido en el momento, interactuar con mapas, animaciones gráficas 2D/3D etc.
Al igual que el cuerpo humano cuando hace algún movimiento, como moverse, correr, cerrar los ojos.
Este lenguaje de programación habilita la creación de contenido nuevo, generando un uso dinámico de la página, controlar archivos de multimedia, crear imágenes animadas, y muchas otras cosas más.
JavaScript es el único lenguaje de programación que entienden los navegadores, con el que se desarrolla las funcionalidades y aplicaciones web.
Una de las cosas que la gente suele hacer, es confundir JavaScript con Java. Estos dos lenguajes de programación son distintos. JavaScript es un lenguaje para desarrollo de páginas web mientras que Java es un lenguaje para el desarrollo de aplicaciones. Nunca olviden eso.
Para finalizar quiero dejar esta nota: HTML y CSS no son lenguajes de programación. Son de maquetado.
¿Pero por qué? La razón es porque no tienen estructura de control. Lo que le permite agregar condiciones o ciclos/bucles para realizar ciertas acciones. En pocas palabras, no puedes agregar cuando quieres que la pagina realice alguna acción. Solo etiquetas.