Lenguajes
Para crear nuestros sitios web tenemos que aprender todas las instrucciones incluidas en HTML, CSS, y JavaScript; y saber cómo organizarlas dado que los
navegadores interpretan y procesan estas instrucciones para mostrar el resultado final al usuario.
Porque como mencionabamos anteriormente HTML5 incorpora tres características (estructura, estilo, y funcionalidad).
HTML
HTML (HyperText Markup Language) es un lenguaje compuesto por un conjunto de etiquetas definidas con un nombre encerrado entre paréntesis angulares. Estos paréntesis angulares delimitan la etiqueta, y el nombre especifica el tipo de contenido que representa. Por ejemplo, la etiqueta «<html>» indica que el contenido es código HTML. Algunas de estas etiquetas se declaran de forma individual, como «<br>«, mientras que otras se declaran en pares, incluyendo una etiqueta de apertura y otra de cierre, como «<html></html>» . En la etiqueta de cierre, el nombre va precedido por una barra invertida.
Tanto las etiquetas individuales como las de apertura pueden incluir atributos para proporcionar información adicional sobre su contenido. Por ejemplo, «<html lang=»es»>» indica que el contenido está en español. Estas etiquetas individuales y las combinaciones de etiquetas de apertura y cierre se conocen como elementos.
Los elementos compuestos por una sola etiqueta se utilizan para modificar el contenido que los rodea o para incluir recursos externos, mientras que los elementos que incluyen etiquetas de apertura y cierre se utilizan para delimitar el contenido del documento, como se muestra en la siguiente imagen.
Para definir un documento, se requiere combinar múltiples elementos que se enumeran secuencialmente de arriba hacia abajo y pueden contener otros elementos dentro de ellos. Por ejemplo, el elemento <html> establece que su contenido debe ser interpretado como código HTML. Por lo tanto, todos los elementos que describen el contenido de ese documento deben ser declarados entre las etiquetas <html> y </html>. Además, los elementos dentro del elemento <html> pueden contener otros elementos.
A continuación, se muestra un ejemplo de un documento HTML básico que incluye todos los elementos necesarios para definir una estructura básica y mostrar el mensaje «¡HOLA MUNDO!» en la pantalla.
<!DOCTYPE html> <html lang="es"> <head> <title>Mi primer documento HTML</title> </head> <body> <p>HOLA MUNDO!</p> </body> </html>
En el ejemplo anterior, presentamos un código sencillo pero con una estructura compleja. En la primera línea, encontramos una etiqueta individual que declara el tipo de documento (<!DOCTYPE html>), seguida por una etiqueta de apertura <html lang=»es»>.
Entre las etiquetas <html> y </html>, se incluyen otros elementos que representan la cabecera y el cuerpo del documento (<head> y <body>), respectivamente. Estos elementos a su vez contienen más elementos con sus respectivos contenidos (<title> y <p>), lo que demuestra cómo se compone un documento HTML. Los elementos se enumeran uno tras otro y también pueden estar dentro de otros elementos, lo que construye una estructura de tipo árbol con el elemento <html> como raíz.
Como mencionamos anteriormente, tanto las etiquetas individuales como las de apertura pueden incluir atributos. Por ejemplo, la etiqueta de apertura declarada en el codigo anterior no solo consta del nombre «html» y los paréntesis angulares, sino que también contiene el atributo «lang» con el valor «es». En este caso, el atributo «lang» especifica el idioma del contenido del documento (en este caso, español).
Los atributos proporcionan información adicional sobre el elemento y su contenido. El nombre del atributo se coloca después del nombre de la etiqueta, seguido por el signo igual (=) y el valor del atributo, que se encierra entre comillas dobles. Este es un mecanismo crucial para brindar detalles adicionales sobre el elemento y su comportamiento.
CSS
CSS (Cascading Style Sheets) es el lenguaje utilizado para definir los estilos de los elementos HTML, como el tamaño, el color, el fondo, el borde, entre otros aspectos visuales. Aunque la mayoría de los navegadores asignan estilos por defecto a los elementos HTML, estos estilos generalmente no coinciden con lo que deseamos para nuestros sitios web. Para establecer estilos personalizados, CSS emplea propiedades y valores. Esta estructura se denomina declaración y sigue una sintaxis específica que incluye dos puntos después del nombre de la propiedad y un punto y coma al final para cerrar la línea.
En el ejemplo anterior, el valor #FF0000 se asigna a la propiedad color. Cuando esta propiedad se aplica a un elemento HTML, el contenido de ese elemento se mostrará en color rojo (ya que el valor #FF0000 representa el color rojo).
Las propiedades CSS pueden agruparse utilizando llaves. Un conjunto de una o más propiedades se denomina regla y se identifica mediante un nombre llamado selector.
body {
width: 100%;
margin: 0px;
background-color: #FF0000;
}
El código anterior declara una regla con tres propiedades: width, margin y background-color. Esta regla se identifica con el nombre «body», lo que significa que las propiedades serán aplicadas al elemento . Si incluimos esta regla en un documento, el contenido del documento se extenderá hasta los límites de la ventana del navegador y tendrá un fondo de color rojo.
JavaScript
A diferencia de HTML y CSS, JavaScript es un lenguaje de programación. Aunque todos estos lenguajes pueden ser considerados como lenguajes de programación, en la práctica existen algunas diferencias en la forma en que proporcionan instrucciones al navegador.
HTML funciona como un conjunto de indicadores que el navegador interpreta para organizar la información, mientras que CSS puede ser visto como una lista de estilos que ayudan al navegador a preparar el documento para su presentación en pantalla (aunque la última especificación lo ha convertido en un lenguaje más dinámico). En contraste, JavaScript es un lenguaje de programación comparable a otros lenguajes de programación profesionales como C++ o Java.
La diferencia principal de JavaScript radica en su capacidad para realizar tareas personalizadas, desde almacenar valores hasta calcular algoritmos complejos. Además, JavaScript tiene la capacidad de interactuar con los elementos del documento y procesar su contenido dinámicamente, lo que lo distingue de HTML y CSS.
Al igual que HTML y CSS, JavaScript está integrado en los navegadores y, por lo tanto, está disponible en todos nuestros documentos. Para incorporar código JavaScript dentro de un documento, HTML proporciona el elemento «<script>«. A continuación se muestra un ejemplo de un código escrito en JavaScript.
<script>
function cambiarColor() {
document.body.style.backgroundColor = "#0000FF";
}
document.addEventListener("click", cambiarColor);
</script>
El código anterior cambia el color de fondo del elemento a azul cuando el usuario hace clic en el documento.
Lenguajes de servidor
Los códigos programados en HTML, CSS y JavaScript son ejecutados por el navegador en la computadora del usuario (el cliente). Esto implica que una vez que los archivos del sitio web se han cargado en el servidor, permanecen sin cambios hasta que son descargados en una computadora personal y sus códigos son ejecutados por el navegador. Aunque esto facilita la creación de sitios web útiles e interactivos, hay momentos en los que necesitamos procesar la información en el servidor antes de enviarla al usuario. El contenido generado a partir de esta información se conoce como contenido dinámico, y es generado por códigos ejecutados en el servidor, programados en lenguajes diseñados específicamente con este propósito (lenguajes de servidor). Cuando el navegador solicita un archivo que contiene este tipo de código, el servidor lo ejecuta y luego envía el resultado como respuesta al usuario. Estos códigos no solo se utilizan para generar contenido y documentos en tiempo real, sino también para procesar la información enviada por el navegador, almacenar datos del usuario en el servidor, controlar cuentas, etc.
Existen varios lenguajes disponibles para crear código ejecutable en los servidores. Los más populares son PHP, Ruby y Python. A continuación, se muestra un ejemplo de código escrito en PHP.
<?php
$nombre = $_GET['minombre'];
print('Su nombre es: '.$nombre);
?>
El código del listado anterior recibe un valor enviado por el navegador, lo guarda en la memoria y genera un mensaje utilizando este valor. Al ejecutarse este código, se crea un nuevo documento que incluye el mensaje final. Este archivo se envía de regreso al cliente y, finalmente, el navegador muestra su contenido en pantalla.