Práctica para entender la aplicación de templates por código

"Código"........ ¿Qué es eso?.......
Es muy recurrente oir "código" en el mundo de la informática... Pero ¿qué es exactamente?
Sin complicarnos mucho, la palabra código hace referencia una serie de caracteres que significan algo y que alguien o algo tiene la capacidad de descifrar, es decir, tiene la capacidad de saber qué significa. Lógicamente el o lo que lo emite, también tiene que saber qué significa.
Por lo tanto decir en informática que estás utilizando código es lo mismo que decir que estás emitiendo un mensaje con intenciones de que algo (generalmente) lo descifre.

Al igual que en la vida real, en al cual nosotr@s nos comunicamos mediante diferentes códigos o como nosotros los llamamos idiomas/lenguajes (Inglés, Ruso, Euskera, Berebere, Español, Alemán, etc...) debido a que existen muchos tipos de receptores/Emisores de código, con sus características propias (ser de un país u otro, donde te han educado de una manera u otra), en informática también existen numerosos receptores que solo entienden un código. El hecho de conocer más o menos lenguajes de código nos permitirá comunicarnos con más o menos máqinas.

En nuestro caso concreto, queremos comunicarnos con un explorador de internet. El explorador de internet (firefox, chrome, internet explorer, safari, etc...) es el encargado de leer el código que hay detrás de cada página web para "traducírselo" a la persona que la visita, que no tiene por qué saber ningún lenguaje informático. Tu lo ves traducido en forma de página web: En forma de botones, de dibujos, vídeos, enlaces, entradas, fondos, colores, animaciones, etc...

Y después de hablar de esto, os preguntaréis ¿En qué lenguaje tengo que hablar entonces para que el explorador me entienda? Hay un par de ellos, pero nosotros le vamos a hablar en lenguaje HTML.
Para entender esto de lenguaje HTML, de aquello de "hay un código detrás de cada página que el explorador traduce" y demás conceptos abstractos que os he mencionado, vamos a ir a un par de páginas archiconocidas. Vamos a ir a google y a youtube.
Con ambas páginas abiertas en diferentes pestañas:

Para añadir una pesaña nueva, damos al símbolo de "+"



Bien... Empecemos por google:
Para ver el código que hay detrás de cada página, es tan sencillo como dar a la tecla "F12".
¿Veis?, nos aparece una consola en la parte inferior de la página web.
Esto es sólo una consola que nos ofrece una previsualización de lo que nosotros estamos viendo en ese momento, es decir, que si nosotros modificamos algo y dejamos la web hecha un desastre, no pasa nada, pues nunca se guardarán e implantarán los cambios que hagamos. Para volver al estado inicial basta con volver a ir a google.
Pues ahí está.... Toooooodo el código que el explorador traduce para que tu veas un simple "Google" en grande, un espacio para el buscador y unas letritas aquí y allá... Todo ello sobre un fondo blanco sin más.
En realidad aunque parezca poco, no estás viendo todo lo que realmente contiene esa página: Reacciones ante los clicks del ratón y saber en todo momento donde está, la comunicación con las inumerables páginas a las que te lleva el buscador con poner una sola palabra, etc... Pero todo ello, se tien a simplificar para que al espectador le resulte agradable ¿Te imaginas una página llena de cosas por aquí y por allá? que rollo.... No sabes dónde está nada...
Vamos pues a modificar el código, a comunicarnos con el explorador y decirle que traduzca lo que le digamos. Concretamente le vamos a decir, que el fondo no es blanco, sino de otro color.
Cada parte del código se refiere a una zona de la página. El inspector o la consola donde se muestra el código nos ayuda a identificarlo. Si pasamos el cursor por las diferentes líneas de código, se nos teñirá de azul la zona de la web a la que esa línea hace referencia. Concretamente la que yo busco es esta:

¿Veis que efectívamente con esta se tiñe de azul casi la totalidad de la página? Eso es porque en toda esa zona, hay fondo ¿Verdad? que es lo que queremos cambiar.
A mano derecha se nos despliega otra ventana llamada "Reglas". Contiene las funciones que HTML para hacer las cosas. Buscamos background:
El explorador, sabe que cuando pone "background", en lenguaje HTML significa algo así como "Que sepas que voy a hacer cosas con el fondo". Una de las cosas que se ha hecho al fondo es ponerle de color blanco. Despliega con ayuda de la flechita de al lado, todas las funciones asociadas al background. La del color es "background - color":

Ves que pone "rgb (255,255,255)" son los valores numéricos que tiene HTML para decir que quiere el blanco. Por otro lado "#fff" es otra forma de llamar al blanco (es ese el que vamos a modificar). Si punchas sobre el circulito blanco, puedes desplazarte por todas las gamas de colores y elegir el que más te guste. Verás como los valores cambian. ¡¡Wow!! mira mi nuevo google:

Nota: Hay algunas cosas que no cambian la página a primera vista, pero en realidad puede que se trate de colores de elementos ocultos, que no podamos modificar, etc...
Vamos ahora con youtube donde se hace más patente o que acabo de decir en la nota.
En este caso, en vez de el color de fondo, cambiemos las letras. Hacedlas más grandes. Ya sabéis, primero F12, luego pasad con el cursos por las diferentes líneas de código y cambiar el código a vuestro gusto desde "Reglas".
En este caso, la opción para cambiar el tamaño de la fuente esta en esta línea. A ver qué conseguís:

¡¡¡Anda!!!, ¡¡Mi fondo es rojo!! Jeje, he cambiado el código, pero en este caso no es tan fácil....Pero, sabéis la instrucción para cambiar el color del background, y la forma de saber en qué línea de código esta todo lo relativo al background y sabéis como cambiarlo a rojo ¿verdad? Para los más atrevidos, os invito a probarlo y a que compartáis cómo lo habéis hecho en vuestros blogs para que los compañeros que no sepan, puedan visitaros y aprender (no olvidéis dejarles comentarios positivos).